fix(knowledge): keep the dock's white fade a constant height

The fade masking the file list behind the Q&A dock was the container's
own background, so it grew with whatever the container held — the
expanded panel, the direct-history card, the reference strip, even a
multi-line textarea — washing out an ever-taller slice of the list.

It moves to its own absolutely-positioned layer pinned to the bottom at
a fixed 120px (pt-10 + box input + bottom padding = the default
collapsed footprint), so the default state looks exactly as before and
no other state stretches it. The mobile rule is unchanged: hidden while
the input is focused so the grey keyboard overlay's gradient carries
through.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Kinyoo
2026-08-10 10:49:32 +08:00
parent b00a68b07e
commit 35f620edc2
@@ -454,15 +454,21 @@ export function KnowledgeAiBottomDock({
// pt-10 always — the fade backdrop hides on focus but the input
// shouldn't jump when the keyboard opens.
!open && "pt-10",
// White fade backdrop. On mobile it hides while the input is focused so the
// grey keyboard overlay's gradient can carry through; on desktop there is no
// such overlay, so keep the fade consistent regardless of focus.
!open && (!isH5 || !keyboardVisible) && "bg-gradient-to-b from-white/0 to-white",
// Expanded: same transparent→white fade as the collapsed state, sized to the
// dialog (the container hugs the card when open, no pt-10), masking the list behind.
open && "bg-gradient-to-b from-white/0 to-white",
)}
>
{/* White fade backdrop — its own layer instead of the container's background,
at a CONSTANT height in every state: it never grows with the expanded
panel, the direct-history card, the reference strip, or a multi-line
textarea. 120px = default collapsed footprint (pt-10 + box input +
bottom padding), so the default state looks exactly as before. On
mobile it hides while the input is focused so the grey keyboard
overlay's gradient can carry through. */}
{(!isH5 || !keyboardVisible) && (
<div
aria-hidden
className="absolute inset-x-0 bottom-0 h-[120px] bg-gradient-to-b from-white/0 to-white"
/>
)}
<div
// data-active exposes the default/active (input-focused) state for future
// styling hooks and QA, without coupling to the mobile keyboard flag.