fix(composer): stop bottom mask strip from clipping the focus ring (#3962)

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).
This commit is contained in:
Ryker_Feng 2026-07-06 21:11:52 +08:00 committed by GitHub
parent fd41fdb065
commit 2ebe5cf048
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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" &&