fix(webui): opaque composer, equal-width message area, cleaner user pill

This commit is contained in:
Xubin Ren
2026-04-23 07:48:32 +00:00
parent 06503cd0fc
commit 185a8fd34d
3 changed files with 8 additions and 7 deletions
@@ -216,9 +216,9 @@ export function ThreadComposer({
className={cn(
"relative mx-auto flex w-full flex-col overflow-hidden transition-all duration-200",
isHero
? "max-w-[40rem] rounded-[24px] border border-border/75 bg-card/72 shadow-[0_10px_30px_rgba(0,0,0,0.10)]"
: "max-w-[49.5rem] rounded-[16px] border border-border/70 bg-card/55",
"focus-within:bg-card/70 focus-within:ring-1 focus-within:ring-foreground/8",
? "max-w-[40rem] rounded-[24px] border border-border/75 bg-card shadow-[0_10px_30px_rgba(0,0,0,0.10)]"
: "max-w-[49.5rem] rounded-[16px] border border-border/70 bg-card",
"focus-within:ring-1 focus-within:ring-foreground/8",
disabled && "opacity-60",
isDragging && "ring-2 ring-primary/40 motion-reduce:ring-0 motion-reduce:border-primary",
)}
@@ -70,10 +70,12 @@ export function ThreadViewport({
{hasMessages ? (
<div className="mx-auto flex min-h-full w-full max-w-[64rem] flex-col">
<div className="flex-1 px-4 pb-20 pt-4">
<ThreadMessages messages={messages} />
<div className="mx-auto w-full max-w-[49.5rem]">
<ThreadMessages messages={messages} />
</div>
</div>
<div className="sticky bottom-0 z-10 mt-auto">
<div className="sticky bottom-0 z-10 mt-auto bg-background">
<div className="px-4 pb-3">
{composer}
</div>