From d3f14dd7d4f1c9ad8554416b300d01d06bec0932 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Fri, 15 Sep 2023 19:53:28 +0200
Subject: [PATCH] [Glitch] Fix dismiss button overlapping with text in
 dismissable banners

Port 2a4fcc51fd44cab3e837e43e8f8dd84fefb97729 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/dismissable_banner.tsx      | 4 ++--
 .../flavours/glitch/styles/components/columns.scss         | 4 +---
 app/javascript/flavours/glitch/styles/rtl.scss             | 7 +++++++
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/dismissable_banner.tsx b/app/javascript/flavours/glitch/components/dismissable_banner.tsx
index 0fb002832e..68fe1f9a22 100644
--- a/app/javascript/flavours/glitch/components/dismissable_banner.tsx
+++ b/app/javascript/flavours/glitch/components/dismissable_banner.tsx
@@ -33,8 +33,6 @@ 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'
@@ -42,6 +40,8 @@ export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
           onClick={handleDismiss}
         />
       </div>
+
+      <div className='dismissable-banner__message'>{children}</div>
     </div>
   );
 };
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index eb9cbdd590..126c68c412 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -1044,9 +1044,7 @@ $ui-header-height: 55px;
   }
 
   &__action {
-    position: absolute;
-    inset-inline-end: 0;
-    top: 0;
+    float: right;
     padding: 15px 10px;
 
     .icon-button {
diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss
index ebc35bb0ce..e69d5d7891 100644
--- a/app/javascript/flavours/glitch/styles/rtl.scss
+++ b/app/javascript/flavours/glitch/styles/rtl.scss
@@ -113,4 +113,11 @@ body.rtl {
   .fa-chevron-right::before {
     content: '\F053';
   }
+
+  .dismissable-banner,
+  .warning-banner {
+    &__action {
+      float: left;
+    }
+  }
 }