ui: enhance chat input vertical expansion and auto-resize
- Switched chat-input to use `clamp()` for vertical expansion (up to 20rem, 12 lines of text vs. previous 5 lines). - Added `field-sizing: content` for modern browser auto-resize support. - Removed layout constraints on `#input-section` by allowing overflow. - Fixed an issue where the textarea wouldn't shrink after sending messages.
Alessandro committed
Feb 26, 2026 at 11:59 UTC
4b3666aa358920fd5cde834ce15622b3fd8dab49
4 files changed
+10
-3
webui/components/chat/input/chat-bar-input.html
+2
-1
@@ -84,8 +84,9 @@
84
font-optical-sizing: auto;
85
-webkit-font-optical-sizing: auto;
86
font-size: 0.9rem;
87
- max-height: 7rem;
87
+ max-height: clamp(7rem, 40vh, 20rem);
88
min-height: 3.05rem;
89
+ field-sizing: content;
90
width: 100%;
91
padding: 0.48rem 40px var(--spacing-sm) var(--spacing-sm);
92
margin-right: var(--spacing-xs);
webui/components/chat/input/chat-bar.html
+2
@@ -39,6 +39,8 @@
39
align-items: start;
40
place-items: normal;
41
flex-shrink: 0;
42
+ max-height: 60vh;
43
+ overflow: visible;
44
z-index: 1001;
45
}
46
webui/components/chat/input/input-store.js
+1
@@ -64,6 +64,7 @@ const model = {
64
adjustTextareaHeight() {
65
const chatInput = document.getElementById("chat-input");
66
if (chatInput) {
67
+ if (!this.message) chatInput.value = "";
68
chatInput.style.height = "auto";
69
chatInput.style.height = chatInput.scrollHeight + "px";
70
}
webui/index.js
+5
-2
@@ -62,6 +62,7 @@ export async function sendMessage() {
62
// no await for the queue
63
// if (success) {
64
inputStore.reset();
65
+ adjustTextareaHeight();
66
// }
67
return;
68
}
@@ -73,8 +74,9 @@ export async function sendMessage() {
74
let response;
75
const messageId = generateGUID();
76
76
- // Clear input and attachments
77
- inputStore.reset();
77
+ // Clear input and attachments
78
+ inputStore.reset();
79
+ adjustTextareaHeight();
80
81
// Include attachments in the user message
82
if (hasAttachments) {
@@ -229,6 +231,7 @@ globalThis.loadKnowledge = async function () {
231
function adjustTextareaHeight() {
232
const chatInputEl = document.getElementById("chat-input");
233
if (chatInputEl) {
234
+ if (!inputStore.message) chatInputEl.value = "";
235
chatInputEl.style.height = "auto";
236
chatInputEl.style.height = chatInputEl.scrollHeight + "px";
237
}