Fix undo toast rendering

When a long text is provided for the undo toast, the text gets mixed with the button. It was fiine for the close button as 'padding-right: 34px;' was just right for it.

This PR moves to flex layout to make the toast more responsive.

+ Add 'display: flex' to the toast and to the undo button container
+ Remove the 'position: absolute' for the close and undo buttons so they get placed by the flex algo
+ add some margin-right to the undo button because it was to close of the text
+ Change the padding to '0px 12px' as 12px top and bottom is too much when the close and undo button are not placed absolutely

Signed-off-by: Louis Chemineau <[email protected]>

Author: artonge

l10n/messages.pot

@@ -2,6 +2,6 @@ msgid ""
 msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 
-#: lib/toast.ts:192
+#: lib/toast.ts:193
 msgid "Undo"
 msgstr ""

lib/toast.ts

@@ -188,6 +188,7 @@ export function showUndo(text: string, onUndo: Function, options?: ToastOptions)
 	// Generate undo layout
 	const undoContent = document.createElement('span')
 	const undoButton = document.createElement('button')
+	undoContent.classList.add('toast-undo-container')
 	undoButton.classList.add('toast-undo-button')
 	undoButton.innerText = t('Undo')
 	undoContent.innerText = text

styles/toast.scss

@@ -28,18 +28,22 @@
 	background-color: var(--color-main-background);
 	color: var(--color-main-text);
 	box-shadow: 0 0 6px 0 var(--color-box-shadow);
-	padding: 12px;
-	padding-right: 34px;
+	padding: 0px 12px;
 	margin-top: 45px;
 	position: fixed;
 	z-index: 10100;
 	border-radius: var(--border-radius);
+	display: flex;
+	align-items: center;
+
+	.toast-undo-container {
+		display: flex;
+		align-items: center;
+	}
 
 	.toast-undo-button,
 	.toast-close {
-		position: absolute;
-		top: 0;
-		right: 0;
+		position: static;
 		overflow: hidden;
 		box-sizing: border-box;
 		min-width: 44px;
@@ -62,6 +66,7 @@
 			$margin: 3px;
 			margin: $margin;
 			height: calc(100% - 2 * #{$margin});
+			margin-left: 12px;
 		}
 
 		&:hover, &:focus, &:active {