manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix AI chat input width — stretch to fill the row

Browse source 
The Input component renders its own wrapper div, so flex-1 passed to
<Input> only hit the inner <input> (already w-full) while the wrapper
stayed content-width, leaving the box narrow with empty space beside it.
Wrap Input in a flex-1 div so the flex child actually stretches.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-29 22:23:05 +05:30
parent 2b534d4c43
commit 45f9d6261b
1 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app/(app)/ai/page.tsx
View file

@ -267,15 +267,19 @@ export default function AIChatPage() {
{/* Input */}
<div className="p-4 border-t bg-white dark:bg-gray-800 flex-shrink-0">
<div className="flex gap-2">
<div className="flex items-center gap-2">
{/* Input renders its own wrapper div, so flex-1 must go on a wrapper
here — putting it on <Input> only hits the inner <input> (already
w-full) and the wrapper stays content-width, leaving it narrow. */}
<div className="flex-1">
<Input
value={input}
onChange={e => setInput(e.target.value)}
onKeyDown={e => e.key === "Enter" && !e.shiftKey && handleSend()}
placeholder="Ask about your baby..."
disabled={loading}
className="flex-1"
/>
</div>
<Button onClick={handleSend} disabled={loading || !input.trim()} loading={loading}>
Send
</Button>