From 9e81556492609dc61f1eb8900a8ea7c87995e0c5 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Tue, 5 Apr 2022 06:34:23 +0000
Subject: [PATCH 1/4] Fix _ToastContainer.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ToastContainer.scss      | 8 +++-----
 src/components/structures/ToastContainer.tsx | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index 5137aed95a5..505dcae8498 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -108,12 +108,12 @@ limitations under the License.
         }
 
         .mx_Toast_title {
+            display: flex;
+            column-gap: 8px;
             width: 100%;
             box-sizing: border-box;
 
             h2 {
-                grid-column: 1 / 3;
-                grid-row: 1;
                 margin: 0;
                 font-size: $font-15px;
                 font-weight: 600;
@@ -122,9 +122,7 @@ limitations under the License.
                 vertical-align: middle;
             }
 
-            span {
-                padding-left: 8px;
-                float: right;
+            .mx_Toast_title_countIndicator {
                 font-size: $font-12px;
                 line-height: $font-22px;
                 color: $secondary-content;
diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx
index 0b71fa9dc92..f50ba4ef84d 100644
--- a/src/components/structures/ToastContainer.tsx
+++ b/src/components/structures/ToastContainer.tsx
@@ -81,7 +81,7 @@ export default class ToastContainer extends React.Component<{}, IState> {
                 titleElement = (
                     <div className="mx_Toast_title">
                         <h2>{ title }</h2>
-                        <span>{ countIndicator }</span>
+                        <span className="mx_Toast_title_countIndicator">{ countIndicator }</span>
                     </div>
                 );
             }

From c41948ce4dea1f9cbd2eef4236bffc3179fc5699 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Fri, 8 Apr 2022 07:40:42 +0000
Subject: [PATCH 2/4] Improve existing rules

- Use properties available for flexbox
- Align the title of the toast to the center

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ToastContainer.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index 8a7b7ca2e56..b6e334f9044 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -109,6 +109,7 @@ limitations under the License.
 
         .mx_Toast_title {
             display: flex;
+            align-items: center;
             column-gap: 8px;
             width: 100%;
             box-sizing: border-box;
@@ -135,17 +136,14 @@ limitations under the License.
         }
 
         .mx_Toast_buttons {
-            float: right;
             display: flex;
+            justify-content: flex-end;
+            column-gap: 5px;
 
             .mx_AccessibleButton {
                 min-width: 96px;
                 box-sizing: border-box;
             }
-
-            .mx_AccessibleButton + .mx_AccessibleButton {
-                margin-left: 5px;
-            }
         }
 
         .mx_Toast_description {

From 9f94cf464e8b0b28ff0d7acd8a45eeb693000777 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Fri, 8 Apr 2022 08:16:12 +0000
Subject: [PATCH 3/4] Set the count indicator on the end side of the div

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ToastContainer.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index b6e334f9044..4cf44b0bfc7 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -127,6 +127,7 @@ limitations under the License.
                 font-size: $font-12px;
                 line-height: $font-22px;
                 color: $secondary-content;
+                margin-inline-start: auto; // on the end side of the div
             }
         }
 

From bf6af7c2e61c2ae53ad0b27a90ee34c962c2d429 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sat, 9 Apr 2022 14:13:31 +0000
Subject: [PATCH 4/4] Remove the vertical-align property since it has no longer
 effect

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ToastContainer.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index 4cf44b0bfc7..00c7cd05b45 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -120,7 +120,6 @@ limitations under the License.
                 font-weight: 600;
                 display: inline;
                 width: auto;
-                vertical-align: middle;
             }
 
             .mx_Toast_title_countIndicator {