Polish chat composer mobile alignment
Match the real chat composer to the welcome composer by using an 8px radius, centering the idle Waiting for input cue and fullscreen input control against the composer container, and switching the fullscreen input icon to the same fullscreen glyph used by modal surface Focus mode. Also remove the mobile-only #chat-input min-height under 640px so the composer can size naturally on narrow screens.
Alessandro committed
Jun 23, 2026 at 12:56 UTC
90abe05d2db97bbf76cd8d9ca6e5cc6fd98e67c8
1 file changed
+22
-9
webui/components/chat/input/chat-bar-input.html
+22
-9
@@ -40,7 +40,7 @@
40
:class="{ 'progress-active': $store.chatInput.progressActive }" aria-hidden="true" style="display: none;">
41
</div>
42
<button id="expand-button" @click="$store.fullScreenInputModal.openModal()" aria-label="Expand input">
43
- <span class="material-symbols-outlined" aria-hidden="true">open_in_full</span>
43
+ <span class="material-symbols-outlined" aria-hidden="true">fullscreen</span>
44
</button>
45
</div>
46
@@ -69,7 +69,7 @@
69
min-height: 4.25rem;
70
padding: 0.42rem 0.52rem 0.42rem 0.72rem;
71
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
72
- border-radius: 16px;
72
+ border-radius: 8px;
73
background: color-mix(in srgb, var(--color-panel) 72%, var(--color-background) 28%);
74
box-shadow:
75
inset 0 1px 0 rgba(255, 255, 255, 0.035),
@@ -154,6 +154,7 @@
154
min-width: 0;
155
display: flex;
156
align-items: center;
157
+ align-self: stretch;
158
}
159
160
#chat-input {
@@ -245,14 +246,15 @@
246
247
#chat-input-progress-placeholder {
248
position: absolute;
248
- top: 0.74rem;
249
+ top: 0;
250
+ bottom: 0;
251
left: 0.12rem;
250
- right: 46px;
252
+ right: 2rem;
253
color: var(--color-text-muted);
254
opacity: 0.7;
255
font-family: var(--font-family-code, "Roboto Mono", monospace);
256
font-size: 0.9rem;
255
- line-height: 1.45;
257
+ line-height: 1.25;
258
white-space: nowrap;
259
overflow: hidden;
260
text-overflow: ellipsis;
@@ -268,27 +270,39 @@
270
271
#chat-input-progress-placeholder .chat-input-progress-cue {
272
color: var(--color-text-muted);
273
+ display: inline-flex;
274
+ align-items: center;
275
+ line-height: 1;
276
}
277
278
#chat-input-progress-placeholder .chat-input-progress-icon {
279
+ display: inline-flex;
280
+ align-items: center;
281
+ justify-content: center;
282
font-size: 1.15rem;
283
line-height: 1;
284
color: var(--color-highlight);
277
- vertical-align: -0.18rem;
285
}
286
287
#expand-button {
288
position: absolute;
282
- top: 12px;
289
+ top: 50%;
290
right: 0;
291
+ width: 2rem;
292
+ height: 2rem;
293
background: transparent;
294
border: none;
295
cursor: pointer;
287
- transform: scale(0.8);
296
+ transform: translateY(-50%) scale(0.8);
297
+ transform-origin: center;
298
font-size: 1.2rem;
299
color: var(--color-text);
300
opacity: 0.2;
301
transition: opacity 0.2s;
302
+ display: flex;
303
+ align-items: center;
304
+ justify-content: center;
305
+ padding: 0;
306
}
307
308
#expand-button:hover {
@@ -376,7 +390,6 @@
390
/* Responsive tweaks */
391
@media (max-width: 640px) {
392
#chat-input {
379
- min-height: 4.2rem;
393
align-content: center;
394
}
395