sorokin.oleg.edu/learnharness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Chat top fade round 1 (owner): long soft wash instead of a hard 20px bar

Browse Source 
The header fade was h-5 (20px) from full background opacity — it
read as a solid bar with a quick blur on the edge. Now a 96px wash:
65% under the title, holding softly through ~25% at the midpoint,
melting to transparent — supports the title, never reads as a bar.
This commit is contained in:
amosblomqvist
2026-09-14 09:48:33 +03:00
parent 0b65838519
commit ae749fe27d
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/chat.tsx
+5 -3
View File
@@ -485,11 +485,13 @@ export function Chat({
<SidebarToggle /> <SidebarToggle />
<div className="min-w-0 flex-1 truncate font-title text-2xl tracking-tight">{title}</div> <div className="min-w-0 flex-1 truncate font-title text-2xl tracking-tight">{title}</div>
<PhaseChip phase={phases.at(-1) ?? "probe"} /> <PhaseChip phase={phases.at(-1) ?? "probe"} />
{/* Soft top fade (owner): the scroller edge under the header eases {/* Soft top fade (owner, round 1 of the fade rework): a long wash
in exactly like the dock gradient at the bottom. */} that holds softly under the title then melts away — no full
opacity anywhere, so it supports the header instead of reading
as a bar. */}
<div <div
aria-hidden aria-hidden
className="pointer-events-none absolute inset-x-0 top-full z-10 h-5 bg-gradient-to-b from-background to-transparent" className="pointer-events-none absolute inset-x-0 top-full z-10 h-24 bg-gradient-to-b from-background/65 via-background/25 to-transparent"
/> />
</header> </header>