ui: increased chat input height
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
f2e96742bda2bf74cb1a93e6cdb1d1abfd7bf705
2 files changed
+17
-6
webui/components/chat/input/chat-bar-input.html
+16
-6
@@ -27,9 +27,7 @@
27
@input="$store.chatInput.adjustTextareaHeight()"
28
x-model="$store.chatInput.message"></textarea>
29
<button id="expand-button" @click="$store.fullScreenInputModal.openModal()" aria-label="Expand input">
30
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
31
- <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
32
- </svg>
30
+ <span class="material-symbols-outlined" aria-hidden="true">open_in_full</span>
31
</button>
32
</div>
33
@@ -80,7 +78,7 @@
78
font-optical-sizing: auto;
79
-webkit-font-optical-sizing: auto;
80
font-size: 0.9rem;
83
- max-height: 7rem;
81
+ max-height: 60vh;
82
min-height: 3.05rem;
83
width: 100%;
84
padding: 0.48rem 40px var(--spacing-sm) var(--spacing-sm);
@@ -102,10 +100,22 @@
100
#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); }
101
#chat-input::placeholder { color: var(--color-text-muted); opacity: 0.7; }
102
105
- #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; }
103
+ #expand-button {
104
+ position: absolute;
105
+ top: 12px;
106
+ right: 6px;
107
+ background: transparent;
108
+ border: none;
109
+ cursor: pointer;
110
+ transform: scale(0.8);
111
+ font-size: 1.2rem;
112
+ color: var(--color-text);
113
+ opacity: 0.2;
114
+ transition: opacity 0.2s;
115
+ }
116
#expand-button:hover { opacity: 0.7; }
117
#expand-button:active { opacity: 1; }
108
- #expand-button svg { width: 1.3rem; height: 1.3rem; }
118
+ #expand-button .material-symbols-outlined { display: block; font-size: 1.3rem; line-height: 1; }
119
120
/* Chat buttons (Send/Mic) */
121
#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
@@ -37,6 +37,7 @@
37
align-items: start;
38
place-items: normal;
39
flex-shrink: 0;
40
+ overflow: visible;
41
z-index: 1001;
42
}
43