From 02d3c05f3495fb50c378db4ca58c2982b9d2b7b5 Mon Sep 17 00:00:00 2001
From: Dave <futurechimp@users.noreply.github.com>
Date: Sat, 27 Dec 2025 18:47:48 +0000
Subject: [PATCH] UI: Move submit/stop button outside input field

- Restructure input area to use flexbox layout
- Button now sits beside input instead of overlapping
- Prevents text from being obscured on longer prompts
- Input takes full available width with proper spacing
---
 src/components/Chat.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index d2c8815..d586f4c 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -677,7 +677,9 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 					style={{
 						maxWidth: "768px",
 						width: "100%",
-						position: "relative",
+						display: "flex",
+						gap: "8px",
+						alignItems: "center",
 					}}
 				>
 					<input
@@ -687,9 +689,8 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 						onKeyDown={(e) => e.key === "Enter" && sendMessage()}
 						placeholder="Send a message..."
 						style={{
-							width: "100%",
+							flex: 1,
 							padding: "14px 20px",
-							paddingRight: "50px", // space for button
 							borderRadius: "24px",
 							border: "1px solid #333",
 							outline: "none",
@@ -705,10 +706,6 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 						onClick={loading ? cancelGeneration : sendMessage}
 						disabled={!loading && !input.trim()}
 						style={{
-							position: "absolute",
-							right: "8px",
-							top: "50%",
-							transform: "translateY(-50%)",
 							background: "#ececec",
 							color: "black",
 							border: "none",
@@ -720,6 +717,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 							justifyContent: "center",
 							cursor: "pointer",
 							opacity: !loading && !input.trim() ? 0.5 : 1,
+							flexShrink: 0,
 						}}
 					>
 						{loading ? "■" : "↑"}