ui: increased chat input height; better icon for full screen input
Replace the custom expand SVG with the Material `open_in_full` icon. Raise the textarea max height to `65vh` and remove the chat bar height cap.
Alessandro committed
Mar 24, 2026 at 18:25 UTC
3485db328f5fd2d81210d06c0eaaf1b5496181be
2 files changed
+16
-7
webui/components/chat/input/chat-bar-input.html
+16
-6
@@ -29,9 +29,7 @@
29
@input="$store.chatInput.adjustTextareaHeight()"
30
x-model="$store.chatInput.message"></textarea>
31
<button id="expand-button" @click="$store.fullScreenInputModal.openModal()" aria-label="Expand input">
32
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
33
- <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
34
- </svg>
32
+ <span class="material-symbols-outlined" aria-hidden="true">open_in_full</span>
33
</button>
34
</div>
35
@@ -84,7 +82,7 @@
82
font-optical-sizing: auto;
83
-webkit-font-optical-sizing: auto;
84
font-size: 0.9rem;
87
- max-height: clamp(7rem, 40vh, 20rem);
85
+ max-height: 65vh;
86
min-height: 3.05rem;
87
width: 100%;
88
padding: 0.48rem 40px var(--spacing-sm) var(--spacing-sm);
@@ -106,10 +104,22 @@
104
#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); }
105
#chat-input::placeholder { color: var(--color-text-muted); opacity: 0.7; }
106
109
- #expand-button { position: absolute; top: 12px; right: 10px; background: transparent; border: none; cursor: pointer; font-size: 1.2rem; color: var(--color-text); opacity: 0.4; transition: opacity 0.2s; }
107
+ #expand-button {
108
+ position: absolute;
109
+ top: 12px;
110
+ right: 6px;
111
+ background: transparent;
112
+ border: none;
113
+ cursor: pointer;
114
+ transform: scale(0.8);
115
+ font-size: 1.2rem;
116
+ color: var(--color-text);
117
+ opacity: 0.2;
118
+ transition: opacity 0.2s;
119
+ }
120
#expand-button:hover { opacity: 0.7; }
121
#expand-button:active { opacity: 1; }
112
- #expand-button svg { width: 1.3rem; height: 1.3rem; }
122
+ #expand-button .material-symbols-outlined { display: block; font-size: 1.3rem; line-height: 1; }
123
124
/* Chat buttons (Send/Mic) */
125
#chat-buttons-wrapper { gap: var(--spacing-xs); padding-left: var(--spacing-xs); line-height: 0.5rem; display: -webkit-flex; display: flex; }
webui/components/chat/input/chat-bar.html
-1
@@ -39,7 +39,6 @@
39
align-items: start;
40
place-items: normal;
41
flex-shrink: 0;
42
- max-height: 60vh;
42
overflow: visible;
43
z-index: 1001;
44
}