diff --git a/app/javascript/images/composer_message.svg b/app/javascript/images/composer_message.svg
index a9c86e6d7be..1d50ff7c2d9 100644
--- a/app/javascript/images/composer_message.svg
+++ b/app/javascript/images/composer_message.svg
@@ -1 +1,8 @@
-
+
diff --git a/app/javascript/mastodon/features/compose/redesign/index.tsx b/app/javascript/mastodon/features/compose/redesign/index.tsx
index d76ea6bc835..1ebb1d51d0c 100644
--- a/app/javascript/mastodon/features/compose/redesign/index.tsx
+++ b/app/javascript/mastodon/features/compose/redesign/index.tsx
@@ -8,7 +8,6 @@ import classNames from 'classnames';
import { LockSimpleOpenIcon } from '@phosphor-icons/react';
import { useDebouncedCallback } from 'use-debounce';
-import messageBackground from '@/images/composer_message.svg?url';
import {
changeComposeSpoilerness,
changeComposeSpoilerText,
@@ -70,11 +69,6 @@ export const RedesignComposeForm: React.FC = ({
const type = useAppSelector(selectComposeType);
const { sensitive, sensitiveText } = useAppSelector(selectComposeSensitive);
- let background: string | null = null;
- if (type === 'message') {
- background = messageBackground;
- }
-
const {
onSensitiveChange,
onSensitiveTextChange,
@@ -94,12 +88,7 @@ export const RedesignComposeForm: React.FC = ({
aria-labelledby={titleId}
className={classNames(className, classes.root)}
>
- {background && (
-
- )}
+ {type === 'message' && }
diff --git a/app/javascript/mastodon/features/compose/redesign/styles.module.scss b/app/javascript/mastodon/features/compose/redesign/styles.module.scss
index b1af1042951..c39c4d64fdd 100644
--- a/app/javascript/mastodon/features/compose/redesign/styles.module.scss
+++ b/app/javascript/mastodon/features/compose/redesign/styles.module.scss
@@ -13,17 +13,20 @@
min-width: 300px;
position: relative;
overflow: hidden;
+ z-index: 1; // To cover the sidebar
}
.background {
mask-repeat: repeat;
- background-color: var(--color-bg-brand-base);
+ mask-image: url('@/images/composer_message.svg');
+ mask-size: 311.36px auto;
+ background-color: var(--color-border-brand);
opacity: 0.15;
position: absolute;
bottom: 0;
right: 0;
- width: 800px;
- height: 800px;
+ top: 0;
+ left: 0;
pointer-events: none;
}