From 2a4fcc51fd44cab3e837e43e8f8dd84fefb97729 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] Fix dismiss button overlapping with text in dismissable
banners (#26935)
---
app/javascript/mastodon/components/dismissable_banner.tsx | 4 ++--
app/javascript/styles/mastodon/components.scss | 4 +---
app/javascript/styles/mastodon/rtl.scss | 7 +++++++
3 files changed, 10 insertions(+), 5 deletions(-)
diff --git a/app/javascript/mastodon/components/dismissable_banner.tsx b/app/javascript/mastodon/components/dismissable_banner.tsx
index d5cdb0750..04a28e3cb 100644
--- a/app/javascript/mastodon/components/dismissable_banner.tsx
+++ b/app/javascript/mastodon/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/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index cd09bfca1..418a9cfea 100644
--- 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
index 8d3d32665..b5c4836bc 100644
--- 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;
+ }
+ }
}