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
This commit is contained in:
Dave
2025-12-27 18:47:48 +00:00
parent 71ce87d836
commit 02d3c05f34

View File

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