feat(web): multiline composer — Enter adds a newline, arrow sends

Stops fat-fingered early sends. The single-line input is now an auto-growing
textarea (Claude-app style): Enter inserts a newline and expands the box (up to a
cap, then it scrolls); you tap the ↑ arrow to send. ⌘/Ctrl+Enter still sends from
a hardware keyboard. Send button is now a round arrow; box resets to one line
after sending. Mobile button is a 42-44px touch target.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-20 03:20:50 +00:00
parent cebb87205c
commit 654a7531e8
2 changed files with 45 additions and 12 deletions
+27 -7
View File
@@ -199,6 +199,7 @@ button:hover, select:hover {
/* Input bar */
#input {
display: flex;
align-items: flex-end; /* arrow stays at the bottom as the textarea grows */
border-top: 1px solid var(--border);
background: var(--bg-elev);
padding: 10px;
@@ -208,9 +209,14 @@ button:hover, select:hover {
background: var(--bg-line);
color: var(--text-main);
border: 1px solid var(--border);
border-radius: 8px;
border-radius: 16px;
padding: 9px 12px;
font-family: var(--font-console);
font-size: 0.95rem;
line-height: 1.4;
resize: none; /* grown programmatically, not by the drag handle */
max-height: 140px;
overflow-y: auto;
transition: border-color .15s, box-shadow .15s;
}
#userInput::placeholder { color: var(--text-fade); }
@@ -221,6 +227,16 @@ button:hover, select:hover {
}
#sendBtn {
margin-left: 8px;
flex: none;
width: 38px;
height: 38px;
padding: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
line-height: 1;
background: var(--accent);
color: #0a0a0a;
border-color: var(--accent);
@@ -936,12 +952,14 @@ select:hover {
#userInput {
font-size: 16px; /* Prevents zoom on iOS */
padding: 12px;
padding: 11px 14px;
}
#sendBtn {
padding: 12px 16px;
font-size: 1rem;
width: 44px; /* comfortable touch target */
height: 44px;
padding: 0;
font-size: 1.35rem;
}
/* Modal - full width on mobile */
@@ -1040,12 +1058,14 @@ select:hover {
#userInput {
font-size: 16px;
padding: 10px;
padding: 10px 13px;
}
#sendBtn {
padding: 10px 14px;
font-size: 0.95rem;
width: 42px;
height: 42px;
padding: 0;
font-size: 1.3rem;
}
.modal-header h3 {