[Glitch] Fix dismiss button overlapping with text in dismissable banners

Port 2a4fcc51fd to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Claire 2023-09-15 19:53:28 +02:00
parent dfc05ec8df
commit d3f14dd7d4
3 changed files with 10 additions and 5 deletions

View file

@ -33,8 +33,6 @@ export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
return ( return (
<div className='dismissable-banner'> <div className='dismissable-banner'>
<div className='dismissable-banner__message'>{children}</div>
<div className='dismissable-banner__action'> <div className='dismissable-banner__action'>
<IconButton <IconButton
icon='times' icon='times'
@ -42,6 +40,8 @@ export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
onClick={handleDismiss} onClick={handleDismiss}
/> />
</div> </div>
<div className='dismissable-banner__message'>{children}</div>
</div> </div>
); );
}; };

View file

@ -1044,9 +1044,7 @@ $ui-header-height: 55px;
} }
&__action { &__action {
position: absolute; float: right;
inset-inline-end: 0;
top: 0;
padding: 15px 10px; padding: 15px 10px;
.icon-button { .icon-button {

View file

@ -113,4 +113,11 @@ body.rtl {
.fa-chevron-right::before { .fa-chevron-right::before {
content: '\F053'; content: '\F053';
} }
.dismissable-banner,
.warning-banner {
&__action {
float: left;
}
}
} }