From 90abe05d2db97bbf76cd8d9ca6e5cc6fd98e67c8 Mon Sep 17 00:00:00 2001
From: Alessandro <155005371+3clyp50@users.noreply.github.com>
Date: Tue, 23 Jun 2026 12:56:21 +0200
Subject: [PATCH] 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.
---
 .../components/chat/input/chat-bar-input.html | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/webui/components/chat/input/chat-bar-input.html b/webui/components/chat/input/chat-bar-input.html
index 001265161..f79ecf8b4 100644
--- a/webui/components/chat/input/chat-bar-input.html
+++ b/webui/components/chat/input/chat-bar-input.html
@@ -40,7 +40,7 @@
           :class="{ 'progress-active': $store.chatInput.progressActive }" aria-hidden="true" style="display: none;">
         </div>
         <button id="expand-button" @click="$store.fullScreenInputModal.openModal()" aria-label="Expand input">
-          <span class="material-symbols-outlined" aria-hidden="true">open_in_full</span>
+          <span class="material-symbols-outlined" aria-hidden="true">fullscreen</span>
         </button>
       </div>
 
@@ -69,7 +69,7 @@
       min-height: 4.25rem;
       padding: 0.42rem 0.52rem 0.42rem 0.72rem;
       border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
-      border-radius: 16px;
+      border-radius: 8px;
       background: color-mix(in srgb, var(--color-panel) 72%, var(--color-background) 28%);
       box-shadow:
         inset 0 1px 0 rgba(255, 255, 255, 0.035),
@@ -154,6 +154,7 @@
       min-width: 0;
       display: flex;
       align-items: center;
+      align-self: stretch;
     }
 
     #chat-input {
@@ -245,14 +246,15 @@
 
     #chat-input-progress-placeholder {
       position: absolute;
-      top: 0.74rem;
+      top: 0;
+      bottom: 0;
       left: 0.12rem;
-      right: 46px;
+      right: 2rem;
       color: var(--color-text-muted);
       opacity: 0.7;
       font-family: var(--font-family-code, "Roboto Mono", monospace);
       font-size: 0.9rem;
-      line-height: 1.45;
+      line-height: 1.25;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -268,27 +270,39 @@
 
     #chat-input-progress-placeholder .chat-input-progress-cue {
       color: var(--color-text-muted);
+      display: inline-flex;
+      align-items: center;
+      line-height: 1;
     }
 
     #chat-input-progress-placeholder .chat-input-progress-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       font-size: 1.15rem;
       line-height: 1;
       color: var(--color-highlight);
-      vertical-align: -0.18rem;
     }
 
     #expand-button {
       position: absolute;
-      top: 12px;
+      top: 50%;
       right: 0;
+      width: 2rem;
+      height: 2rem;
       background: transparent;
       border: none;
       cursor: pointer;
-      transform: scale(0.8);
+      transform: translateY(-50%) scale(0.8);
+      transform-origin: center;
       font-size: 1.2rem;
       color: var(--color-text);
       opacity: 0.2;
       transition: opacity 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
     }
 
     #expand-button:hover {
@@ -376,7 +390,6 @@
     /* Responsive tweaks */
     @media (max-width: 640px) {
       #chat-input {
-        min-height: 4.2rem;
         align-content: center;
       }