diff --git a/app/javascript/mastodon/features/compose/index.tsx b/app/javascript/mastodon/features/compose/index.tsx index 892cbb97617..527e541e84d 100644 --- a/app/javascript/mastodon/features/compose/index.tsx +++ b/app/javascript/mastodon/features/compose/index.tsx @@ -166,7 +166,7 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
-
+
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 8f12152de93..e6a8f26e8a5 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3734,12 +3734,12 @@ a.account__display-name { } .drawer__inner__mastodon { - background: var(--clr-bg-primary) - url('data:image/svg+xml;utf8,') - no-repeat bottom / 100% auto; + position: relative; + background: var(--clr-bg-primary); flex: 1; min-height: 47px; display: none; + contain: content; > img { display: block; diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index 761e7f9ea5c..1ac1894b110 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -7,20 +7,6 @@ flex-direction: column; height: 100vh; padding: 0; - - &::after { - content: ''; - position: absolute; - inset: auto 0 0; - height: 32px; - background-color: var(--clr-bg-accent-subtle); - - /* Decorative zig-zag pattern at the bottom of the page */ - mask-image: url('data:image/svg+xml;utf8,'); - mask-position: bottom; - mask-repeat: repeat-x; - z-index: -1; - } } .modal-layout__mastodon { @@ -50,3 +36,19 @@ margin-top: 0; } } + +.with-zig-zag-decoration { + &::after { + content: ''; + position: absolute; + inset: auto 0 0; + height: 32px; + background-color: var(--clr-bg-accent-subtle); + + /* Decorative zig-zag pattern at the bottom of the page */ + mask-image: url('data:image/svg+xml;utf8,'); + mask-position: bottom; + mask-repeat: repeat-x; + z-index: -1; + } +} diff --git a/app/views/layouts/modal.html.haml b/app/views/layouts/modal.html.haml index d25dd22d375..26a03472fe2 100644 --- a/app/views/layouts/modal.html.haml +++ b/app/views/layouts/modal.html.haml @@ -1,7 +1,7 @@ - content_for :header_tags do = vite_typescript_tag 'public.tsx', crossorigin: 'anonymous' -- content_for :body_classes, 'modal-layout compose-standalone' +- content_for :body_classes, 'modal-layout with-zig-zag-decoration compose-standalone' - content_for :content do - if user_signed_in? && !@hide_header