Fix dismiss button overlapping with text in dismissable banners (mast…

…odon#26935)
ClearlyClaire · Sep 15, 2023 · 2a4fcc5 · 2a4fcc5
1 parent e4f5114
commit 2a4fcc5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/app/javascript/mastodon/components/dismissable_banner.tsx b/app/javascript/mastodon/components/dismissable_banner.tsx
@@ -33,15 +33,15 @@ export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
 
   return (
     <div className='dismissable-banner'>
-      <div className='dismissable-banner__message'>{children}</div>
-
       <div className='dismissable-banner__action'>
         <IconButton
           icon='times'
           title={intl.formatMessage(messages.dismiss)}
           onClick={handleDismiss}
         />
       </div>
+
+      <div className='dismissable-banner__message'>{children}</div>
     </div>
   );
 };
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -8941,9 +8941,7 @@ noscript {
   }
 
   &__action {
-    position: absolute;
-    inset-inline-end: 0;
-    top: 0;
+    float: right;
     padding: 15px 10px;
 
     .icon-button {

diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss
@@ -58,4 +58,11 @@ body.rtl {
   .fa-chevron-right::before {
     content: '\F053';
   }
+
+  .dismissable-banner,
+  .warning-banner {
+    &__action {
+      float: left;
+    }
+  }
 }