Chat composer: WorkClaw bottom spacing + input height
Verified against the dark chat/welcome captures: - Active form wrapper: pb-4 → px-4 pt-4 pb-8 + bg-gradient-to-t from-background to-transparent (32px bottom gap with a fade, was a flush 16px). - Textarea: rest at 44px and grow-then-scroll via [field-sizing:content] (we had no auto-grow). Per-variant caps — active min-h-11 max-h-[180px], welcome max-h-[88px]; + pl-1. (Reviewer said keep max-h-40, but prod is 180/88, and field-sizing is the actual grow mechanism.) - Box surface kept as-is (#1F1F1F + shadow) per the decision — not switching to WorkClaw's flat #262626. typecheck/lint(0)/86 unit/p1-chat/6 visual green; no baseline change. Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
3a81be17d9
commit
d17cc3797b
@@ -60,6 +60,10 @@ export function Composer({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// WorkClaw rests the active input at 44px and grows-then-scrolls via CSS
|
||||||
|
// field-sizing (the welcome pill rests at one line, caps lower).
|
||||||
|
const heightClasses =
|
||||||
|
variant === "active" ? "min-h-11 max-h-[180px]" : "max-h-[88px]";
|
||||||
const textarea = (
|
const textarea = (
|
||||||
<textarea
|
<textarea
|
||||||
aria-label={`Message ${agentName}`}
|
aria-label={`Message ${agentName}`}
|
||||||
@@ -70,7 +74,7 @@ export function Composer({
|
|||||||
rows={1}
|
rows={1}
|
||||||
onChange={(e) => setValue(e.target.value)}
|
onChange={(e) => setValue(e.target.value)}
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
className="max-h-40 min-h-6 w-full flex-1 resize-none bg-transparent text-sm text-foreground outline-none placeholder:text-subtle-foreground"
|
className={`${heightClasses} w-full flex-1 resize-none bg-transparent pl-1 text-sm text-foreground outline-none [field-sizing:content] placeholder:text-subtle-foreground`}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -90,7 +94,10 @@ export function Composer({
|
|||||||
// right while generating).
|
// right while generating).
|
||||||
if (variant === "active") {
|
if (variant === "active") {
|
||||||
return (
|
return (
|
||||||
<form onSubmit={submit} className="pb-4">
|
<form
|
||||||
|
onSubmit={submit}
|
||||||
|
className="bg-gradient-to-t from-background to-transparent px-4 pt-4 pb-8"
|
||||||
|
>
|
||||||
<div className={`flex flex-col gap-2 p-4 ${SURFACE}`}>
|
<div className={`flex flex-col gap-2 p-4 ${SURFACE}`}>
|
||||||
{textarea}
|
{textarea}
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
|
|||||||
Reference in New Issue
Block a user