fix(panel): bottom-align and size the Secretary chat composer buttons

The Start/Send buttons used items-stretch with a fixed-height button, pinning
a cramped button to the top of a tall textarea. Bottom-align the row, give
Start a real primary size and Send a proper square icon button, and cap the
textarea height so the composer reads as a deliberate input.
This commit is contained in:
Renn F
2026-06-17 07:16:50 +02:00
parent 9cc63125d2
commit 6ce3cc1225
@@ -245,7 +245,7 @@ export function SecretaryTab() {
</CardHeader> </CardHeader>
<CardContent className="flex flex-1 flex-col gap-4"> <CardContent className="flex flex-1 flex-col gap-4">
<ChatMessages messages={messages} streaming={streaming} /> <ChatMessages messages={messages} streaming={streaming} />
<div className="flex items-stretch gap-2"> <div className="flex items-end gap-2">
<Textarea <Textarea
value={input} value={input}
onChange={(e) => setInput(e.target.value)} onChange={(e) => setInput(e.target.value)}
@@ -255,6 +255,7 @@ export function SecretaryTab() {
: "Opening message (optional)…" : "Opening message (optional)…"
} }
rows={2} rows={2}
className="max-h-40 min-h-[2.75rem] flex-1 resize-none"
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) { if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
@@ -267,11 +268,18 @@ export function SecretaryTab() {
<Button <Button
onClick={() => void handleSend()} onClick={() => void handleSend()}
disabled={!input.trim()} disabled={!input.trim()}
size="icon"
className="h-11 w-11 shrink-0"
aria-label="Send message"
> >
<Send className="h-4 w-4" /> <Send className="h-4 w-4" />
</Button> </Button>
) : ( ) : (
<Button onClick={() => void handleStart()} disabled={starting}> <Button
onClick={() => void handleStart()}
disabled={starting}
className="h-11 shrink-0 px-6"
>
{starting ? ( {starting ? (
<Loader2 className="h-4 w-4 animate-spin" /> <Loader2 className="h-4 w-4 animate-spin" />
) : ( ) : (