Decrease chat composer max-height
Chat input box max-height was set too high, to the point of breaking other UI elements.
Alessandro committed
May 26, 2026 at 14:01 UTC
22e79811f32d749a64be94d00e20d7b61efd0eea
1 file changed
+262
-136
webui/components/chat/input/chat-bar-input.html
+262
-136
@@ -1,86 +1,79 @@
1
<html>
2
+
3
<head>
3
- <script type="module">
4
- import { store as fullScreenStore } from "/components/modals/full-screen-input/full-screen-store.js";
5
- import { store as messageQueueStore } from "/components/chat/message-queue/message-queue-store.js";
6
- import { store as chatInputStore } from "/components/chat/input/input-store.js";
7
- </script>
4
+ <script type="module">
5
+ import { store as fullScreenStore } from "/components/modals/full-screen-input/full-screen-store.js";
6
+ import { store as messageQueueStore } from "/components/chat/message-queue/message-queue-store.js";
7
+ import { store as chatInputStore } from "/components/chat/input/input-store.js";
8
+ </script>
9
</head>
9
-<body>
10
- <div x-data>
11
- <x-extension id="chat-input-box-start"></x-extension>
12
- <div class="input-row">
13
- <!-- More actions (+): opens upward; content lives in bottom-actions.html -->
14
- <div
15
- class="attachment-wrapper chat-more-dropdown"
16
- @click.outside="$store.chatInput.closeChatMoreMenu()"
17
- @keydown.escape.window="$store.chatInput.closeChatMoreMenu()"
18
- >
19
- <button
20
- type="button"
21
- class="chat-more-trigger"
22
- @click.stop="$store.chatInput.toggleChatMoreMenu()"
23
- :aria-expanded="$store.chatInput.chatMoreMenuOpen.toString()"
24
- aria-label="More actions"
25
- >
26
- <span class="material-symbols-outlined" aria-hidden="true">add</span>
27
- </button>
28
- <div
29
- class="chat-more-panel"
30
- x-show="$store.chatInput.chatMoreMenuOpen"
31
- x-transition
32
- style="display: none;"
33
- >
34
- <x-component path="chat/input/bottom-actions.html"></x-component>
35
- </div>
36
- </div>
10
38
- <!-- Container for textarea and expand button -->
39
- <div id="chat-input-container" style="position: relative;">
40
- <textarea id="chat-input" :placeholder="$store.chatInput.inputPlaceholder" rows="1"
41
- @keydown.enter="if (!$event.shiftKey && !$event.isComposing && $event.keyCode !== 229) { $event.preventDefault(); $store.chatInput.sendMessage(); }"
42
- @keydown.up="$store.chatInput.historyPrev($event)"
43
- @keydown.down="$store.chatInput.historyNext($event)"
44
- @input="$store.chatInput.adjustTextareaHeight()"
45
- x-model="$store.chatInput.message"></textarea>
46
- <div
47
- id="chat-input-progress-placeholder"
48
- x-show="$store.chatInput.showProgressPlaceholder"
49
- x-html="$store.chatInput.progressPlaceholderHtml"
50
- :class="{ 'progress-active': $store.chatInput.progressActive }"
51
- aria-hidden="true"
52
- style="display: none;"
53
- ></div>
54
- <button id="expand-button" @click="$store.fullScreenInputModal.openModal()" aria-label="Expand input">
55
- <span class="material-symbols-outlined" aria-hidden="true">open_in_full</span>
56
- </button>
11
+<body>
12
+ <div x-data>
13
+ <x-extension id="chat-input-box-start"></x-extension>
14
+ <div class="input-row">
15
+ <!-- More actions (+): opens upward; content lives in bottom-actions.html -->
16
+ <div class="attachment-wrapper chat-more-dropdown" @click.outside="$store.chatInput.closeChatMoreMenu()"
17
+ @keydown.escape.window="$store.chatInput.closeChatMoreMenu()">
18
+ <button type="button" class="chat-more-trigger" @click.stop="$store.chatInput.toggleChatMoreMenu()"
19
+ :aria-expanded="$store.chatInput.chatMoreMenuOpen.toString()" aria-label="More actions">
20
+ <span class="material-symbols-outlined" aria-hidden="true">add</span>
21
+ </button>
22
+ <div class="chat-more-panel" x-show="$store.chatInput.chatMoreMenuOpen" x-transition style="display: none;">
23
+ <x-component path="chat/input/bottom-actions.html"></x-component>
24
</div>
25
+ </div>
26
59
- <div id="chat-buttons-wrapper">
60
- <!-- Send button -->
61
- <button class="chat-button" id="send-button" aria-label="Send message"
62
- @click="$store.chatInput.sendMessage()"
63
- :class="$store.chatInput.sendButtonClass"
64
- :title="$store.chatInput.sendButtonTitle">
65
- <span class="material-symbols-outlined" x-text="$store.chatInput.sendButtonIcon"></span>
66
- </button>
67
- </div>
27
+ <!-- Container for textarea and expand button -->
28
+ <div id="chat-input-container" style="position: relative;">
29
+ <textarea id="chat-input" :placeholder="$store.chatInput.inputPlaceholder" rows="1"
30
+ @keydown.enter="if (!$event.shiftKey && !$event.isComposing && $event.keyCode !== 229) { $event.preventDefault(); $store.chatInput.sendMessage(); }"
31
+ @keydown.up="$store.chatInput.historyPrev($event)" @keydown.down="$store.chatInput.historyNext($event)"
32
+ @input="$store.chatInput.adjustTextareaHeight()" x-model="$store.chatInput.message"></textarea>
33
+ <div id="chat-input-progress-placeholder" x-show="$store.chatInput.showProgressPlaceholder"
34
+ x-html="$store.chatInput.progressPlaceholderHtml"
35
+ :class="{ 'progress-active': $store.chatInput.progressActive }" aria-hidden="true" style="display: none;">
36
</div>
37
+ <button id="expand-button" @click="$store.fullScreenInputModal.openModal()" aria-label="Expand input">
38
+ <span class="material-symbols-outlined" aria-hidden="true">open_in_full</span>
39
+ </button>
40
+ </div>
41
70
- <!-- Full Screen Input Modal -->
71
- <x-component path="modals/full-screen-input/full-screen-input.html"></x-component>
72
- <x-extension id="chat-input-box-end"></x-extension>
42
+ <div id="chat-buttons-wrapper">
43
+ <!-- Send button -->
44
+ <button class="chat-button" id="send-button" aria-label="Send message" @click="$store.chatInput.sendMessage()"
45
+ :class="$store.chatInput.sendButtonClass" :title="$store.chatInput.sendButtonTitle">
46
+ <span class="material-symbols-outlined" x-text="$store.chatInput.sendButtonIcon"></span>
47
+ </button>
48
+ </div>
49
</div>
50
51
+ <!-- Full Screen Input Modal -->
52
+ <x-component path="modals/full-screen-input/full-screen-input.html"></x-component>
53
+ <x-extension id="chat-input-box-end"></x-extension>
54
+ </div>
55
+
56
76
- <style>
57
+ <style>
58
/* Layout rows */
78
- .input-row { display: flex; align-items: center; gap: var(--spacing-xs); width: 100%; white-space: nowrap; }
79
-
80
- .attachment-wrapper { position: relative; flex-shrink: 0; }
59
+ .input-row {
60
+ display: flex;
61
+ align-items: center;
62
+ gap: var(--spacing-xs);
63
+ width: 100%;
64
+ white-space: nowrap;
65
+ }
66
+
67
+ .attachment-wrapper {
68
+ position: relative;
69
+ flex-shrink: 0;
70
+ }
71
72
/* Composer + menu: custom panel (edit here; not shared with file-browser dropdown) */
83
- .chat-more-dropdown { z-index: 1; }
73
+ .chat-more-dropdown {
74
+ z-index: 1;
75
+ }
76
+
77
.chat-more-trigger {
78
cursor: pointer;
79
color: var(--color-text);
@@ -96,12 +89,20 @@
89
border-radius: 50%;
90
background: transparent;
91
}
99
- .chat-more-trigger:hover { opacity: 1; }
100
- .chat-more-trigger:active { opacity: 0.5; }
92
+
93
+ .chat-more-trigger:hover {
94
+ opacity: 1;
95
+ }
96
+
97
+ .chat-more-trigger:active {
98
+ opacity: 0.5;
99
+ }
100
+
101
.chat-more-trigger .material-symbols-outlined {
102
font-size: 1.5rem;
103
line-height: 1;
104
}
105
+
106
.chat-more-panel {
107
position: absolute;
108
left: 0;
@@ -119,58 +120,100 @@
120
z-index: 1050;
121
padding: 0.2rem 0;
122
}
123
+
124
.light-mode .chat-more-panel {
125
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
126
}
125
-/* Text input */
127
+
128
+ /* Text input */
129
#chat-input-container {
127
- position: relative;
128
- width: 100%;
130
+ position: relative;
131
+ width: 100%;
132
}
133
+
134
#chat-input {
131
- background-color: var(--color-input);
132
- border: 1px solid var(--color-border);
133
- border-radius: 8px;
134
- color: var(--color-text);
135
- flex-grow: 1;
136
- font-family: "Roboto Mono", monospace;
137
- font-optical-sizing: auto;
138
- -webkit-font-optical-sizing: auto;
139
- font-size: 0.9rem;
140
- max-height: 60vh;
141
- min-height: 3.05rem;
142
- width: 100%;
143
- padding: 0.48rem 40px var(--spacing-sm) var(--spacing-sm);
144
- margin-right: var(--spacing-xs);
145
- overflow-y: auto;
146
- scroll-behavior: smooth;
147
- resize: none;
148
- align-content: start;
149
- background-clip: border-box;
150
- border: 6px solid transparent;
151
- outline: 1px solid var(--color-border);
152
- transition: all 0.3s ease;
153
- -webkit-transition: all 0.3s ease;
154
- }
155
- #chat-input::-webkit-scrollbar { width: 6px; height: 6px; }
156
- #chat-input::-webkit-scrollbar-track { background: transparent; margin: 4px 0; border-radius: 6px; }
157
- #chat-input::-webkit-scrollbar-thumb { background-color: rgba(155,155,155,0.5); border-radius: 6px; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; }
158
- #chat-input::-webkit-scrollbar-thumb:hover { background-color: rgba(155,155,155,0.7); }
159
- #chat-input:focus { outline: 0.05rem solid rgba(155,155,155,0.5); font-size: 0.955rem; padding-top: 0.45rem; background-color: var(--color-input-focus); }
160
- #chat-input::placeholder { color: var(--color-text-muted); opacity: 0.7; transition: color 0.3s ease; }
135
+ background-color: var(--color-input);
136
+ border: 1px solid var(--color-border);
137
+ border-radius: 8px;
138
+ color: var(--color-text);
139
+ flex-grow: 1;
140
+ font-family: "Roboto Mono", monospace;
141
+ font-optical-sizing: auto;
142
+ -webkit-font-optical-sizing: auto;
143
+ font-size: 0.9rem;
144
+ max-height: 30vh;
145
+ min-height: 3.05rem;
146
+ width: 100%;
147
+ padding: 0.48rem 40px var(--spacing-sm) var(--spacing-sm);
148
+ margin-right: var(--spacing-xs);
149
+ overflow-y: auto;
150
+ scroll-behavior: smooth;
151
+ resize: none;
152
+ align-content: start;
153
+ background-clip: border-box;
154
+ border: 6px solid transparent;
155
+ outline: 1px solid var(--color-border);
156
+ transition: all 0.3s ease;
157
+ -webkit-transition: all 0.3s ease;
158
+ }
159
+
160
+ #chat-input::-webkit-scrollbar {
161
+ width: 6px;
162
+ height: 6px;
163
+ }
164
+
165
+ #chat-input::-webkit-scrollbar-track {
166
+ background: transparent;
167
+ margin: 4px 0;
168
+ border-radius: 6px;
169
+ }
170
+
171
+ #chat-input::-webkit-scrollbar-thumb {
172
+ background-color: rgba(155, 155, 155, 0.5);
173
+ border-radius: 6px;
174
+ -webkit-transition: background-color 0.2s ease;
175
+ transition: background-color 0.2s ease;
176
+ }
177
+
178
+ #chat-input::-webkit-scrollbar-thumb:hover {
179
+ background-color: rgba(155, 155, 155, 0.7);
180
+ }
181
+
182
+ #chat-input:focus {
183
+ outline: 0.05rem solid rgba(155, 155, 155, 0.5);
184
+ font-size: 0.955rem;
185
+ padding-top: 0.45rem;
186
+ background-color: var(--color-input-focus);
187
+ }
188
+
189
+ #chat-input::placeholder {
190
+ color: var(--color-text-muted);
191
+ opacity: 0.7;
192
+ transition: color 0.3s ease;
193
+ }
194
195
/* Progress ghost text animation — gentle pulse on placeholder */
196
#chat-input.progress-active::placeholder {
197
animation: placeholder-pulse 2s ease-in-out infinite;
198
}
199
+
200
@keyframes placeholder-pulse {
167
- 0%, 100% { opacity: 0.45; }
168
- 50% { opacity: 0.85; }
201
+
202
+ 0%,
203
+ 100% {
204
+ opacity: 0.45;
205
+ }
206
+
207
+ 50% {
208
+ opacity: 0.85;
209
+ }
210
}
211
+
212
#chat-input.progress-active {
213
border-color: color-mix(in srgb, var(--color-highlight) 20%, transparent);
214
outline-color: color-mix(in srgb, var(--color-highlight) 15%, transparent);
215
}
216
+
217
#chat-input-progress-placeholder {
218
position: absolute;
219
top: calc(6px + 0.48rem);
@@ -189,12 +232,15 @@
232
align-items: center;
233
gap: 0.35rem;
234
}
235
+
236
#chat-input-progress-placeholder.progress-active {
237
animation: placeholder-pulse 2s ease-in-out infinite;
238
}
239
+
240
#chat-input-progress-placeholder .chat-input-progress-cue {
241
color: var(--color-text-muted);
242
}
243
+
244
#chat-input-progress-placeholder .chat-input-progress-icon {
245
font-size: 1.15rem;
246
line-height: 1;
@@ -202,40 +248,120 @@
248
vertical-align: -0.18rem;
249
}
250
205
- #expand-button {
206
- position: absolute;
207
- top: 12px;
208
- right: 6px;
209
- background: transparent;
210
- border: none;
211
- cursor: pointer;
212
- transform: scale(0.8);
213
- font-size: 1.2rem;
214
- color: var(--color-text);
215
- opacity: 0.2;
216
- transition: opacity 0.2s;
251
+ #expand-button {
252
+ position: absolute;
253
+ top: 12px;
254
+ right: 6px;
255
+ background: transparent;
256
+ border: none;
257
+ cursor: pointer;
258
+ transform: scale(0.8);
259
+ font-size: 1.2rem;
260
+ color: var(--color-text);
261
+ opacity: 0.2;
262
+ transition: opacity 0.2s;
263
+ }
264
+
265
+ #expand-button:hover {
266
+ opacity: 0.7;
267
+ }
268
+
269
+ #expand-button:active {
270
+ opacity: 1;
271
+ }
272
+
273
+ #expand-button .material-symbols-outlined {
274
+ display: block;
275
+ font-size: 1.3rem;
276
+ line-height: 1;
277
}
218
- #expand-button:hover { opacity: 0.7; }
219
- #expand-button:active { opacity: 1; }
220
- #expand-button .material-symbols-outlined { display: block; font-size: 1.3rem; line-height: 1; }
278
279
/* Chat buttons (Send/Mic) */
223
- #chat-buttons-wrapper { gap: var(--spacing-xs); padding-left: var(--spacing-xs); line-height: 0.5rem; display: -webkit-flex; display: flex; }
224
- .chat-button { border: none; border-radius: 50%; color: var(--color-background); cursor: pointer; font-size: var(--font-size-normal); height: 2.525rem; width: 2.525rem; margin: 0 0.18rem 0 0 var(--spacing-xs); display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-shrink: 0; flex-grow: 0; min-width: 2.525rem; -webkit-transition: background-color var(--transition-speed), box-shadow 0.12s ease-in-out, filter 0.12s ease-in-out; transition: background-color var(--transition-speed), box-shadow 0.12s ease-in-out, filter 0.12s ease-in-out; }
225
- #send-button { background-color: #4248f1; }
226
- #send-button.send-queue { background-color: #e67e22; }
227
- #send-button:hover { background-color: #353bc5; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 6px 14px rgba(0,0,0,0.2); }
228
- #send-button.send-queue:hover { background-color: #d35400; }
229
- #send-button:active { background-color: #2b309c; filter: brightness(0.96); }
230
- .chat-button svg { width: 1.5rem; height: 1.5rem; }
231
- #send-button .material-symbols-outlined { font-size: 1.5rem; }
232
-
280
+ #chat-buttons-wrapper {
281
+ gap: var(--spacing-xs);
282
+ padding-left: var(--spacing-xs);
283
+ line-height: 0.5rem;
284
+ display: -webkit-flex;
285
+ display: flex;
286
+ }
287
+
288
+ .chat-button {
289
+ border: none;
290
+ border-radius: 50%;
291
+ color: var(--color-background);
292
+ cursor: pointer;
293
+ font-size: var(--font-size-normal);
294
+ height: 2.525rem;
295
+ width: 2.525rem;
296
+ margin: 0 0.18rem 0 0 var(--spacing-xs);
297
+ display: -webkit-flex;
298
+ display: flex;
299
+ align-items: center;
300
+ justify-content: center;
301
+ flex-shrink: 0;
302
+ flex-grow: 0;
303
+ min-width: 2.525rem;
304
+ -webkit-transition: background-color var(--transition-speed), box-shadow 0.12s ease-in-out, filter 0.12s ease-in-out;
305
+ transition: background-color var(--transition-speed), box-shadow 0.12s ease-in-out, filter 0.12s ease-in-out;
306
+ }
307
+
308
+ #send-button {
309
+ background-color: #4248f1;
310
+ }
311
+
312
+ #send-button.send-queue {
313
+ background-color: #e67e22;
314
+ }
315
+
316
+ #send-button:hover {
317
+ background-color: #353bc5;
318
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.2);
319
+ }
320
+
321
+ #send-button.send-queue:hover {
322
+ background-color: #d35400;
323
+ }
324
+
325
+ #send-button:active {
326
+ background-color: #2b309c;
327
+ filter: brightness(0.96);
328
+ }
329
+
330
+ .chat-button svg {
331
+ width: 1.5rem;
332
+ height: 1.5rem;
333
+ }
334
+
335
+ #send-button .material-symbols-outlined {
336
+ font-size: 1.5rem;
337
+ }
338
+
339
/* Responsive tweaks */
340
@media (max-width: 640px) {
235
- #chat-input { min-height: 5.3rem; align-content: start; }
236
- #chat-buttons-wrapper { display: flex; gap: var(--spacing-xs); padding: 0 0 0 var(--spacing-sm) !important; width: 3.5rem; flex-wrap: wrap; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
341
+ #chat-input {
342
+ min-height: 5.3rem;
343
+ align-content: start;
344
+ }
345
+
346
+ #chat-buttons-wrapper {
347
+ display: flex;
348
+ gap: var(--spacing-xs);
349
+ padding: 0 0 0 var(--spacing-sm) !important;
350
+ width: 3.5rem;
351
+ flex-wrap: wrap;
352
+ -webkit-transition: all 0.3s ease;
353
+ transition: all 0.3s ease;
354
+ }
355
}
238
- @media (min-width: 768px) { #chat-buttons-wrapper { flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } }
239
- </style>
356
+
357
+ @media (min-width: 768px) {
358
+ #chat-buttons-wrapper {
359
+ flex-wrap: nowrap;
360
+ -webkit-flex-wrap: nowrap;
361
+ flex-wrap: nowrap;
362
+ }
363
+ }
364
+ </style>
365
</body>
241
-</html>
366
+
367
+</html>
\ No newline at end of file