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 = (