From 0e038360185971a6e5132bae27007d28a032b330 Mon Sep 17 00:00:00 2001
From: Tyler <109685178+tlongwell-block@users.noreply.github.com>
Date: Fri, 17 Jul 2026 15:15:19 -0400
Subject: [PATCH] fix(desktop): limit channel composer blur to input (#2038)

Signed-off-by: npub1t2tgm7d8f995uqvmnm8h88sg3wnpp9a5xysjf6dg3tjmgt3ltulqdp8ehr <5a968df9a7494b4e019b9ecf739e088ba61097b4312124e9a88ae5b42e3f5f3e@sprout-oss.stage.blox.sqprod.co>
Co-authored-by: npub1t2tgm7d8f995uqvmnm8h88sg3wnpp9a5xysjf6dg3tjmgt3ltulqdp8ehr <5a968df9a7494b4e019b9ecf739e088ba61097b4312124e9a88ae5b42e3f5f3e@sprout-oss.stage.blox.sqprod.co>
---
 .../src/features/channels/ui/ChannelPane.tsx  |  7 +++++--
 desktop/tests/e2e/channels.spec.ts            | 20 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 77bd557c9..59b540401 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -674,7 +674,7 @@ export const ChannelPane = React.memo(function ChannelPane({
             </div>
           ) : (
             <div
-              className="pointer-events-none absolute inset-x-0 bottom-0 z-40 bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/55"
+              className="pointer-events-none absolute inset-x-0 bottom-0 z-40"
               data-testid="channel-composer-overlay"
               ref={composerWrapperRef}
             >
@@ -725,7 +725,10 @@ export const ChannelPane = React.memo(function ChannelPane({
                   }
                   showTopBorder={false}
                 />
-                <div className="min-h-8 overflow-visible bg-transparent px-5 pb-1.5 pt-0">
+                <div
+                  className="min-h-8 overflow-visible bg-background px-5 pb-1.5 pt-0"
+                  data-testid="channel-composer-activity-row"
+                >
                   <div className="flex h-full w-full items-center gap-2 overflow-visible">
                     {hasComposerBotActivity ? (
                       <div className="flex min-w-0 flex-1 overflow-visible">
diff --git a/desktop/tests/e2e/channels.spec.ts b/desktop/tests/e2e/channels.spec.ts
index 69c096abc..2186c727e 100644
--- a/desktop/tests/e2e/channels.spec.ts
+++ b/desktop/tests/e2e/channels.spec.ts
@@ -1724,7 +1724,25 @@ test("channel date divider keeps the date sticky while the separator rule scroll
       return Number.parseInt(sharedBackdropZIndex, 10);
     })
     .toBeGreaterThan(Number.parseInt(metrics.dividerZIndex, 10));
-  await expect(page.getByTestId("channel-composer-overlay")).toBeVisible();
+  const composerOverlay = page.getByTestId("channel-composer-overlay");
+  await expect(composerOverlay).toBeVisible();
+  await expect(composerOverlay).toHaveCSS("backdrop-filter", "none");
+  await expect(composerOverlay).toHaveCSS(
+    "background-color",
+    "rgba(0, 0, 0, 0)",
+  );
+  await expect(composerOverlay.getByTestId("message-composer")).not.toHaveCSS(
+    "backdrop-filter",
+    "none",
+  );
+  const composerActivityRow = composerOverlay.getByTestId(
+    "channel-composer-activity-row",
+  );
+  await expect(composerActivityRow).toHaveCSS("backdrop-filter", "none");
+  await expect(composerActivityRow).not.toHaveCSS(
+    "background-color",
+    "rgba(0, 0, 0, 0)",
+  );
   await expect
     .poll(async () => {
       const composerOverlayZIndex = await page