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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user