From 6bc4f7b66a3d99f05d0075af1f843deb70218959 Mon Sep 17 00:00:00 2001
From: Louis Chemineau <louis@chmn.me>
Date: Thu, 12 May 2022 14:38:55 +0200
Subject: [PATCH] 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 <louis@chmn.me>
---
 l10n/messages.pot |  2 +-
 lib/toast.ts      |  1 +
 styles/toast.scss | 15 ++++++++++-----
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/l10n/messages.pot b/l10n/messages.pot
index bf71f37b..20262517 100644
--- a/l10n/messages.pot
+++ b/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 ""
diff --git a/lib/toast.ts b/lib/toast.ts
index bdeb887d..56623624 100644
--- a/lib/toast.ts
+++ b/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
diff --git a/styles/toast.scss b/styles/toast.scss
index 92dc6858..fb79dd55 100644
--- a/styles/toast.scss
+++ b/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 {