From 45f9d6261b8b4691cab17824c936980520cc3b76 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Fri, 29 May 2026 22:23:05 +0530
Subject: [PATCH] =?UTF-8?q?Fix=20AI=20chat=20input=20width=20=E2=80=94=20s?=
 =?UTF-8?q?tretch=20to=20fill=20the=20row?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/app/(app)/ai/page.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/app/(app)/ai/page.tsx b/src/app/(app)/ai/page.tsx
index d19370b..9412099 100644
--- a/src/app/(app)/ai/page.tsx
+++ b/src/app/(app)/ai/page.tsx
@@ -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">
-            <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 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}
+              />
+            </div>
             <Button onClick={handleSend} disabled={loading || !input.trim()} loading={loading}>
               Send
             </Button>