Fix infinite input grow: fixed textarea height, fill_height off, pin via JS

app.py

@@ -277,7 +277,7 @@ def make_chatbot():
     common = dict(
         value=[],
         elem_id="nyra-chatbot",
-        height=520,
+        height=420,
         render_markdown=True,
         show_label=False,
         layout="bubble",
@@ -297,9 +297,10 @@ def build_app() -> gr.Blocks:
     default_lang = "pt"
     t0 = UI[default_lang]
 
+    # fill_height=False: avoids flex feedback loop that makes the input grow forever
     blocks_kwargs = dict(
         title="Nyra Chat",
-        fill_height=True,
+        fill_height=False,
         analytics_enabled=False,
         elem_id="nyra-root",
         theme=build_theme(),
@@ -313,7 +314,7 @@ def build_app() -> gr.Blocks:
     except TypeError:
         ctx = gr.Blocks(
             title="Nyra Chat",
-            fill_height=True,
+            fill_height=False,
             analytics_enabled=False,
             elem_id="nyra-root",
         )
@@ -381,16 +382,18 @@ def build_app() -> gr.Blocks:
 
                 chatbot = make_chatbot()
 
-                with gr.Row(elem_id="nyra-input-row"):
+                with gr.Row(elem_id="nyra-input-row", equal_height=True):
                     msg = gr.Textbox(
                         elem_id="nyra-input",
                         placeholder=t0["placeholder"],
                         show_label=False,
-                        lines=2,
-                        max_lines=8,
+                        lines=1,
+                        max_lines=1,
                         scale=6,
                         container=False,
                         autofocus=True,
+                        # Prevent Gradio auto-grow height thrashing
+                        interactive=True,
                     )
                     send_btn = gr.Button(
                         t0["send"],

static/app.css

@@ -196,12 +196,14 @@ body::before {
   }
 }
 
-/* Sidebar */
+/* Sidebar — no 100vh min-height (that stretches the whole page with fill flex) */
 #nyra-sidebar {
   background: var(--nyra-graphite) !important;
   border-right: 1px solid var(--nyra-hairline) !important;
-  min-height: calc(100vh - 56px);
+  min-height: 0 !important;
+  max-height: none !important;
   padding: 1rem 0.85rem !important;
+  flex: 0 0 auto !important;
 }
 
 #nyra-sidebar .gr-button,
@@ -210,11 +212,18 @@ body::before {
   gap: 0.5rem;
 }
 
-/* Main column */
+/* Main column — do not let flex children grow without bound */
 #nyra-main {
   padding: 0.5rem 1rem 1.25rem !important;
   max-width: calc(var(--nyra-max-chat) + 4rem);
   margin: 0 auto;
+  min-width: 0 !important;
+  overflow: hidden !important;
+}
+
+#nyra-main > .gap,
+#nyra-main .form {
+  min-height: 0 !important;
 }
 
 /* Empty state hero */
@@ -296,7 +305,17 @@ body::before {
 }
 
 #nyra-chatbot {
-  min-height: 42vh;
+  height: 420px !important;
+  max-height: 50vh !important;
+  min-height: 280px !important;
+  flex: 0 0 auto !important;
+  overflow: hidden !important;
+}
+
+#nyra-chatbot .wrapper,
+#nyra-chatbot .bubble-wrap {
+  max-height: 100% !important;
+  overflow-y: auto !important;
 }
 
 /* Hide Gradio's default "Chatbot" floating label */
@@ -382,11 +401,12 @@ body::before {
   background: transparent;
 }
 
-/* Input dock */
+/* Input dock — FIXED height; kill Gradio auto-grow infinite loop */
 #nyra-input-row {
   max-width: var(--nyra-max-chat);
-  margin: 0.5rem auto 0;
-  padding: 0.35rem;
+  width: 100%;
+  margin: 0.75rem auto 0 !important;
+  padding: 0.35rem 0.45rem !important;
   border-radius: var(--nyra-radius-input);
   background: rgba(18, 18, 24, 0.72) !important;
   border: 1px solid var(--nyra-hairline) !important;
@@ -394,6 +414,14 @@ body::before {
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  flex: 0 0 auto !important;
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+  align-items: center !important;
+  min-height: 0 !important;
+  max-height: 88px !important;
+  overflow: hidden !important;
+  align-self: center !important;
 }
 
 #nyra-input-row:focus-within {
@@ -401,23 +429,57 @@ body::before {
   box-shadow: var(--nyra-shadow), 0 0 0 3px rgba(245, 166, 35, 0.12);
 }
 
+/* Pin the textbox block so it cannot expand the page forever */
+#nyra-input,
+#nyra-input.block,
+#nyra-input .form,
+#nyra-input label,
+#nyra-input .input-container {
+  flex: 1 1 auto !important;
+  min-height: 0 !important;
+  max-height: 72px !important;
+  height: auto !important;
+  overflow: hidden !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
 #nyra-input textarea,
 #nyra-input input,
-#nyra-input .scroll-hide textarea {
+#nyra-input .scroll-hide textarea,
+#nyra-input textarea.scroll-hide {
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
   color: var(--nyra-starlight) !important;
   font-size: 0.98rem !important;
   font-family: var(--nyra-font-body) !important;
-  padding: 0.85rem 1rem !important;
-  min-height: 52px !important;
+  padding: 0.75rem 1rem !important;
+  /* CRITICAL: fixed height — Gradio auto-resize otherwise grows forever */
+  height: 48px !important;
+  min-height: 48px !important;
+  max-height: 48px !important;
+  line-height: 1.4 !important;
+  resize: none !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  field-sizing: fixed !important;
 }
 
 #nyra-input textarea::placeholder {
   color: var(--nyra-silver) !important;
 }
 
+/* Send button stays aligned, never stretched */
+#nyra-send,
+#nyra-input-row > #nyra-send {
+  align-self: center !important;
+  flex: 0 0 auto !important;
+  height: 44px !important;
+  max-height: 44px !important;
+}
+
 /* Primary send button */
 #nyra-send,
 #nyra-send button {

static/app.js

@@ -27,17 +27,50 @@
     document.body.classList.toggle("nyra-has-messages", !!has);
   }
 
+  function pinInputHeight() {
+    // Gradio sometimes rewrites textarea height inline → force a fixed size
+    var nodes = document.querySelectorAll(
+      "#nyra-input textarea, #nyra-input input"
+    );
+    nodes.forEach(function (el) {
+      el.style.height = "48px";
+      el.style.minHeight = "48px";
+      el.style.maxHeight = "48px";
+      el.style.resize = "none";
+      el.style.overflowY = "auto";
+      // Stop auto-resize listeners from expanding forever
+      el.setAttribute("rows", "1");
+    });
+    var row = document.getElementById("nyra-input-row");
+    if (row) {
+      row.style.maxHeight = "88px";
+      row.style.flexGrow = "0";
+    }
+  }
+
   function boot() {
     hydrateLucide();
     updateEmptyState();
+    pinInputHeight();
     var bot = document.querySelector("#nyra-chatbot");
     if (bot && !bot.dataset.nyraObserved) {
       bot.dataset.nyraObserved = "1";
       new MutationObserver(function () {
         updateEmptyState();
         hydrateLucide();
+        pinInputHeight();
       }).observe(bot, { childList: true, subtree: true });
     }
+    var input = document.querySelector("#nyra-input");
+    if (input && !input.dataset.nyraPin) {
+      input.dataset.nyraPin = "1";
+      new MutationObserver(pinInputHeight).observe(input, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+        attributeFilter: ["style", "rows"],
+      });
+    }
   }
 
   if (document.readyState === "loading") {