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:
@@ -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 ? "■" : "↑"}
|
||||
|
||||
Reference in New Issue
Block a user