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