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>
This commit is contained in:
Tyler
2026-07-17 15:15:19 -04:00
committed by GitHub
co-authored by npub1t2tgm7d8f995uqvmnm8h88sg3wnpp9a5xysjf6dg3tjmgt3ltulqdp8ehr
parent 64b8fea6dc
commit 0e03836018
2 changed files with 24 additions and 3 deletions
@@ -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">
+19 -1
View File
@@ -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