fix(desktop): mask composer rounded corners (#2165)

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}

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={

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;

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);
 }