Make ToastContainer compatible with RTL layout (#8230)

* Fix _ToastContainer.scss Signed-off-by: Suguru Hirahara <[email protected]> * Improve existing rules - Use properties available for flexbox - Align the title of the toast to the center Signed-off-by: Suguru Hirahara <[email protected]> * Set the count indicator on the end side of the div Signed-off-by: Suguru Hirahara <[email protected]> * Remove the vertical-align property since it has no longer effect Signed-off-by: Suguru Hirahara <[email protected]>
matrix-org · Apr 14, 2022 · eb1d9b8 · eb1d9b8
1 parent 08a2d81
commit eb1d9b8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 12 deletions.
diff --git 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
@@ -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>
                 );
             }