~cytrogen/masto-fe

2a4fcc51fd44cab3e837e43e8f8dd84fefb97729 — Claire 2 years ago e4f5114
Fix dismiss button overlapping with text in dismissable banners (#26935)

M app/javascript/mastodon/components/dismissable_banner.tsx => app/javascript/mastodon/components/dismissable_banner.tsx +2 -2
@@ 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>
  );
};

M app/javascript/styles/mastodon/components.scss => app/javascript/styles/mastodon/components.scss +1 -3
@@ 8941,9 8941,7 @@ noscript {
  }

  &__action {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    float: right;
    padding: 15px 10px;

    .icon-button {

M app/javascript/styles/mastodon/rtl.scss => app/javascript/styles/mastodon/rtl.scss +7 -0
@@ 58,4 58,11 @@ body.rtl {
  .fa-chevron-right::before {
    content: '\F053';
  }

  .dismissable-banner,
  .warning-banner {
    &__action {
      float: left;
    }
  }
}