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