From 2ebe5cf048bb554a9c3a493b28665f6aa1691279 Mon Sep 17 00:00:00 2001
From: Ryker_Feng <90562015+18062706139fcz@users.noreply.github.com>
Date: Mon, 6 Jul 2026 21:11:52 +0800
Subject: [PATCH] fix(composer): stop bottom mask strip from clipping the focus
 ring (#3962)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On conversation pages the composer renders an opaque `bg-background` strip
just below itself to mask scrolled content peeking past the rounded corners.
The strip was a child of `PromptInput`, the element that draws the focus ring.
A parent's box-shadow always paints beneath its own descendants, so the strip
covered the bottom ~3px of the ring — the blue focus outline looked cut off
along the bottom edge whenever the composer sat flush at the viewport bottom.

Move the strip out of `PromptInput` to be a sibling with a lower stacking order
and give the composer `relative z-10`, so the ring composites above the strip.
The strip still masks the same region; only the paint order changes. Welcome
mode is unaffected (it never renders the strip).
---
 frontend/src/components/workspace/input-box.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/workspace/input-box.tsx b/frontend/src/components/workspace/input-box.tsx
index 60403925a..b6af8472b 100644
--- a/frontend/src/components/workspace/input-box.tsx
+++ b/frontend/src/components/workspace/input-box.tsx
@@ -1168,7 +1168,7 @@ export function InputBox({
       )}
       <PromptInput
         className={cn(
-          "bg-background/85 rounded-2xl backdrop-blur-sm transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl",
+          "bg-background/85 relative z-10 rounded-2xl backdrop-blur-sm transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl",
           className,
         )}
         disabled={disabled}
@@ -1570,10 +1570,10 @@ export function InputBox({
             />
           </PromptInputTools>
         </PromptInputFooter>
-        {!isWelcomeMode && (
-          <div className="bg-background absolute right-0 -bottom-[17px] left-0 z-0 h-4"></div>
-        )}
       </PromptInput>
+      {!isWelcomeMode && (
+        <div className="bg-background absolute right-0 -bottom-[17px] left-0 z-0 h-4"></div>
+      )}
 
       {isWelcomeMode &&
         searchParams.get("mode") !== "skill" &&