From c6a148c3474f09cf40ee062c3b78ca3a04672fc4 Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Fri, 21 Aug 2026 13:43:15 +0000
Subject: [PATCH] Composer redesign: Tile message background image (#40234)

---
 app/javascript/images/composer_message.svg          |  9 ++++++++-
 .../mastodon/features/compose/redesign/index.tsx    | 13 +------------
 .../features/compose/redesign/styles.module.scss    |  9 ++++++---
 3 files changed, 15 insertions(+), 16 deletions(-)

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 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 800"><g stroke="#000" stroke-miterlimit="10" stroke-width=".4"><path d="M0-32C80-32 80 2.56 160 2.56S240-32 319.981-32s80 34.56 160 34.56S560-32 640-32 720 2.56 800 2.56M0 296.32c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 296.32 640 296.32s80 34.56 160 34.56M0 37.12c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 37.12 640 37.12s80 34.56 160 34.56M0 365.44c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 365.44 640 365.44 720 400 800 400M0 123.52c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 123.52 640 123.52s80 34.56 160 34.56M0 451.84c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 451.84 640 451.84s80 34.56 160 34.56M0 641.92c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 641.92 640 641.92s80 34.56 160 34.56M0 227.2c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 227.2 640 227.2s80 34.56 160 34.56M0 555.52c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 555.52 640 555.52s80 34.56 160 34.56M0 745.6c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 745.6 640 745.6s80 34.56 160 34.56"/><path d="M0 2.56c80 0 80 34.56 160 34.56S240 2.56 319.981 2.56s80 34.56 160 34.56S560 2.56 640 2.56s80 34.56 160 34.56M0 330.88c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 330.88 640 330.88s80 34.56 160 34.56M0 71.68c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 71.68 640 71.68s80 34.56 160 34.56M0 400c80 0 80 34.56 160 34.56S240 400 319.981 400s80 34.56 160 34.56S560 400 640 400s80 34.56 160 34.56M0 158.08c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 158.08 640 158.08s80 34.56 160 34.56M0 486.4c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 486.4 640 486.4s80 34.56 160 34.56M0 676.48c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 676.48 640 676.48s80 34.56 160 34.56M0 261.76c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 261.76 640 261.76s80 34.56 160 34.56M0 590.08c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 590.08 640 590.08s80 34.56 160 34.56M0 780.16c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 780.16 640 780.16s80 34.56 160 34.56"/><path d="M0-14.72c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560-14.72 640-14.72s80 34.56 160 34.56M0 313.6c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 313.6 640 313.6s80 34.56 160 34.56M0 54.4c80 0 80 34.56 160 34.56S240 54.4 319.981 54.4s80 34.56 160 34.56S560 54.4 640 54.4s80 34.56 160 34.56M0 382.72c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 382.72 640 382.72s80 34.56 160 34.56M0 140.8c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 140.8 640 140.8s80 34.56 160 34.56M0 469.12c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 469.12 640 469.12s80 34.56 160 34.56M0 659.2c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 659.2 640 659.2s80 34.56 160 34.56M0 244.48c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 244.48 640 244.48s80 34.56 160 34.56M0 572.8c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 572.8 640 572.8s80 34.56 160 34.56M0 762.88c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 762.88 640 762.88s80 34.56 160 34.56"/><path d="M0 19.84c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 19.84 640 19.84 720 54.4 800 54.4M0 348.16c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 348.16 640 348.16s80 34.56 160 34.56M0 106.24c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 106.24 640 106.24s80 34.56 160 34.56M0 434.56c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 434.56 640 434.56s80 34.56 160 34.56M0 624.64c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 624.64 640 624.64s80 34.56 160 34.56M0 209.92c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 209.92 640 209.92s80 34.56 160 34.56M0 538.24c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 538.24 640 538.24s80 34.56 160 34.56M0 728.32c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 728.32 640 728.32s80 34.56 160 34.56"/><path d="M0 88.96c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 88.96 640 88.96s80 34.56 160 34.56M0 417.28c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 417.28 640 417.28s80 34.56 160 34.56M0 192.64c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 192.64 640 192.64s80 34.56 160 34.56M0 520.96c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 520.96 640 520.96s80 34.56 160 34.56M0 711.04c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 711.04 640 711.04s80 34.56 160 34.56"/><path d="M0 175.36c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 175.36 640 175.36s80 34.56 160 34.56M0 503.68c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 503.68 640 503.68s80 34.56 160 34.56M0 693.76c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 693.76 640 693.76s80 34.56 160 34.56M0 279.04c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 279.04 640 279.04s80 34.56 160 34.56M0 607.36c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 607.36 640 607.36s80 34.56 160 34.56M0 797.44c80 0 80 34.56 160 34.56s80-34.56 159.981-34.56 80 34.56 160 34.56S560 797.44 640 797.44 720 832 800 832"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -8.64 320 17.28">
+  <g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".4">
+    <path d="M0-34.56C80-34.56 80 0 160 0s80-34.56 160-34.56" />
+    <path d="M0-17.28c80 0 80 34.56 160 34.56s80-34.56 160-34.56" />
+    <path d="M0 0c80 0 80 34.56 160 34.56S240 0 320 0" />
+    <path d="M0 17.28c80 0 80 34.56 160 34.56s80-34.56 160-34.56" />
+  </g>
+</svg>
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<RedesignComposeFormProps> = ({
   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<RedesignComposeFormProps> = ({
       aria-labelledby={titleId}
       className={classNames(className, classes.root)}
     >
-      {background && (
-        <div
-          className={classes.background}
-          style={{ maskImage: `url(${background})` }}
-        />
-      )}
+      {type === 'message' && <div className={classes.background} />}
 
       <ComposeFormHeader id={titleId} noMinimize={noMinimize} />
 
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;
 }