From eb1d9b8f418bf0da734a6a027d15aedac3abe4d3 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 14 Apr 2022 20:35:52 +0000
Subject: [PATCH] Make ToastContainer compatible with RTL layout (#8230)

* Fix _ToastContainer.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* 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>

* Set the count indicator on the end side of the div

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* 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      | 18 +++++++-----------
 src/components/structures/ToastContainer.tsx |  2 +-
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index 2609ddff7f..00c7cd05b4 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -108,26 +108,25 @@ limitations under the License.
         }
 
         .mx_Toast_title {
+            display: flex;
+            align-items: center;
+            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;
                 display: inline;
                 width: auto;
-                vertical-align: middle;
             }
 
-            span {
-                padding-left: 8px;
-                float: right;
+            .mx_Toast_title_countIndicator {
                 font-size: $font-12px;
                 line-height: $font-22px;
                 color: $secondary-content;
+                margin-inline-start: auto; // on the end side of the div
             }
         }
 
@@ -137,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 {
diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx
index 7f2969e5af..4cd1e654af 100644
--- a/src/components/structures/ToastContainer.tsx
+++ b/src/components/structures/ToastContainer.tsx
@@ -79,7 +79,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>
                 );
             }