From 8024ce72efbd7ccd5332eaac048b96af954c947e Mon Sep 17 00:00:00 2001
From: thomaspblock <thomasp@squareup.com>
Date: Mon, 20 Jul 2026 13:58:56 +0200
Subject: [PATCH] fix(desktop): mask composer rounded corners (#2165)

---
 .../src/features/channels/ui/ChannelPane.tsx  |  2 +-
 .../messages/ui/MessageThreadPanel.tsx        |  2 +-
 .../src/shared/styles/globals/composer.css    | 39 +++++++++++++++++++
 .../e2e/channel-composer-overflow.spec.ts     | 35 ++++++++++++++++-
 4 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 810ea2714..121e211f4 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -734,7 +734,7 @@ export const ChannelPane = React.memo(function ChannelPane({
               data-testid="channel-composer-overlay"
               ref={composerWrapperRef}
             >
-              <div className="pointer-events-auto">
+              <div className="composer-overlay-corner-masks pointer-events-auto">
                 {timeoutState.active ? (
                   <ComposerTimeoutBanner
                     expiresAtMs={timeoutState.expiresAtMs}
diff --git a/desktop/src/features/messages/ui/MessageThreadPanel.tsx b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
index 9de092853..c7624e43a 100644
--- a/desktop/src/features/messages/ui/MessageThreadPanel.tsx
+++ b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
@@ -816,7 +816,7 @@ export function MessageThreadPanel({
       >
         <div
           className={cn(
-            "pointer-events-auto",
+            "composer-overlay-corner-masks pointer-events-auto",
             hasConstrainedColumn && THREAD_PANEL_COLUMN_CLASS,
           )}
           style={
diff --git a/desktop/src/shared/styles/globals/composer.css b/desktop/src/shared/styles/globals/composer.css
index dc37074b7..912ed1c79 100644
--- a/desktop/src/shared/styles/globals/composer.css
+++ b/desktop/src/shared/styles/globals/composer.css
@@ -1,3 +1,42 @@
+.composer-overlay-corner-masks::before,
+.composer-overlay-corner-masks::after {
+  position: absolute;
+  bottom: 2.5rem;
+  z-index: 0;
+  width: 1rem;
+  height: 1rem;
+  background: hsl(var(--background));
+  content: "";
+}
+
+.composer-overlay-corner-masks::before {
+  left: 1.25rem;
+  mask-image: radial-gradient(
+    circle at top right,
+    transparent 0 1rem,
+    black calc(1rem + 0.5px)
+  );
+  -webkit-mask-image: radial-gradient(
+    circle at top right,
+    transparent 0 1rem,
+    black calc(1rem + 0.5px)
+  );
+}
+
+.composer-overlay-corner-masks::after {
+  right: 1.25rem;
+  mask-image: radial-gradient(
+    circle at top left,
+    transparent 0 1rem,
+    black calc(1rem + 0.5px)
+  );
+  -webkit-mask-image: radial-gradient(
+    circle at top left,
+    transparent 0 1rem,
+    black calc(1rem + 0.5px)
+  );
+}
+
 .rich-text-composer .tiptap {
   outline: none;
   min-height: 1lh;
diff --git a/desktop/tests/e2e/channel-composer-overflow.spec.ts b/desktop/tests/e2e/channel-composer-overflow.spec.ts
index 7fd2a6e0e..149a4247a 100644
--- a/desktop/tests/e2e/channel-composer-overflow.spec.ts
+++ b/desktop/tests/e2e/channel-composer-overflow.spec.ts
@@ -52,7 +52,40 @@ async function expectOverlayBottomMask(
   const hasMask = await overlay.evaluate((element) => {
     const after = getComputedStyle(element, "::after");
     const before = getComputedStyle(element, "::before");
-    return after.content !== "none" && before.content !== "none";
+    const composer = element.querySelector<HTMLElement>(
+      '[data-testid="message-composer"]',
+    );
+    const cornerMaskContainer = element.querySelector<HTMLElement>(
+      ".composer-overlay-corner-masks",
+    );
+    if (!composer || !cornerMaskContainer) return false;
+
+    const overlayRect = element.getBoundingClientRect();
+    const composerRect = composer.getBoundingClientRect();
+    const leftMask = getComputedStyle(cornerMaskContainer, "::before");
+    const rightMask = getComputedStyle(cornerMaskContainer, "::after");
+    const tolerance = 0.5;
+
+    return (
+      after.content !== "none" &&
+      before.content !== "none" &&
+      leftMask.maskImage !== "none" &&
+      rightMask.maskImage !== "none" &&
+      Math.abs(
+        composerRect.left - overlayRect.left - Number.parseFloat(leftMask.left),
+      ) <= tolerance &&
+      Math.abs(
+        overlayRect.right -
+          composerRect.right -
+          Number.parseFloat(rightMask.right),
+      ) <= tolerance &&
+      Math.abs(
+        overlayRect.bottom -
+          composerRect.bottom -
+          Number.parseFloat(leftMask.bottom),
+      ) <= tolerance &&
+      leftMask.bottom === rightMask.bottom
+    );
   });
   expect(hasMask).toBe(true);
 }