feat: output panel internal scrollbar with auto-follow

app.py

@@ -590,18 +590,25 @@ gradio-app > div {
 [class*="gradio-container"] .codemirror-wrapper,
 [class*="gradio-container"] .cm-editor { min-height: 220px !important; }
 
-/* Prevent wrappers INSIDE the output section from becoming internal scroll
-   containers. If they clip content the auto-follow scrolls them instead of the
-   document, making it impossible to scroll back to the top of the page.
-   We scope this narrowly to #quest-output so it does not disturb buttons or
-   other parts of the UI. */
+/* Output tab panels: fixed viewport-relative height with a vertical scrollbar.
+   This keeps the page layout stable while the research streams in, and lets
+   the user scroll output content independently of the rest of the page. */
 #quest-output .tabitem,
-#quest-output [role="tabpanel"],
-#quest-output .tab-content,
-#quest-output .tabs > div:not(.tab-nav),
-#quest-output .block,
-#quest-output .wrap,
-#quest-output .contain {
+#quest-output [role="tabpanel"] {
+  overflow-y: auto !important;
+  min-height: 320px !important;
+  max-height: 62vh !important;
+  height: auto !important;
+  overscroll-behavior: contain;
+}
+/* Inner blocks / wraps inside the output must NOT clip or fix their own height
+   so the content can grow freely within the tab panel scroller. */
+#quest-output .tabitem .block,
+#quest-output .tabitem .wrap,
+#quest-output .tabitem .contain,
+#quest-output [role="tabpanel"] .block,
+#quest-output [role="tabpanel"] .wrap,
+#quest-output [role="tabpanel"] .contain {
   overflow: visible !important;
   max-height: none !important;
   height: auto !important;
@@ -3149,108 +3156,85 @@ function() {
 
 
   // === Auto-scroll ===
+  // Design: the Output tab panel (#quest-output .tabitem) is the intentional
+  // scroll container (fixed max-height + overflow-y:auto via CSS).
+  // auto-follow scrolls that inner panel to the bottom as content streams in.
+  // Clicking Run Research scrolls the PAGE to show the output card.
   var autoFollow = true;
   var ignoreScroll = false;
 
-  // Walk up from an element to find the nearest vertically-scrollable ancestor.
-  // Gradio/HF may scroll a wrapper div instead of the window.
-  function scrollableAncestor(el) {
-    var node = el.parentElement;
-    while (node && node !== document.body && node !== document.documentElement) {
-      var oy = getComputedStyle(node).overflowY;
-      if ((oy === 'auto' || oy === 'scroll') && node.scrollHeight > node.clientHeight + 2) {
-        return node;
-      }
-      node = node.parentElement;
+  // Return the active, visible tab panel inside #quest-output.
+  function outputPanel() {
+    var out = document.getElementById('quest-output');
+    if (!out) return null;
+    // Prefer the visible tabitem with actual scroll room.
+    var panels = out.querySelectorAll('.tabitem, [role="tabpanel"]');
+    for (var i = 0; i < panels.length; i++) {
+      var p = panels[i];
+      if (p.offsetParent !== null) return p;  // visible panel
     }
-    return document.scrollingElement || document.documentElement;
+    return panels[0] || null;
   }
 
-  // Scroll so the output is in view.
-  // - alignEnd=false (click): use scrollIntoView for reliability across layouts.
-  // - alignEnd=true  (auto-follow): use explicit window.scrollTo so we only
-  //   move the document and never accidentally scroll an inner wrapper, which
-  //   would make it impossible to scroll back to the top afterwards.
-  function scrollToOutput(alignEnd) {
+  // Scroll the inner panel to the bottom (auto-follow during streaming).
+  function followOutputBottom() {
+    var panel = outputPanel();
+    if (!panel) return;
+    ignoreScroll = true;
+    panel.scrollTop = panel.scrollHeight;
+    setTimeout(function () { ignoreScroll = false; }, 300);
+  }
+
+  // Scroll the PAGE so the top of #quest-output is visible (on Run click).
+  function scrollPageToOutput() {
     var out = document.getElementById('quest-output');
     if (!out) return;
-    ignoreScroll = true;
-    if (!alignEnd) {
-      // Jump to top of output on button click — scrollIntoView is the most
-      // reliable cross-browser way to handle this.
-      try { out.scrollIntoView({ block: 'start' }); } catch (_) {}
-    } else {
-      // Auto-follow: only scroll the document/viewport, never inner containers.
-      var container = scrollableAncestor(out);
-      var isDocRoot = (container === document.documentElement ||
-                       container === (document.scrollingElement || document.documentElement));
-      var cTop  = isDocRoot ? 0 : container.getBoundingClientRect().top;
-      var oRect = out.getBoundingClientRect();
-      var viewH = isDocRoot ? window.innerHeight : container.clientHeight;
-      var delta = (oRect.bottom - cTop) - viewH + 24;
-      var newTop = Math.max(0, container.scrollTop + delta);
-      if (isDocRoot) {
-        window.scrollTo(0, newTop);
-      } else {
-        container.scrollTop = newTop;
-      }
+    try { out.scrollIntoView({ block: 'start', behavior: 'smooth' }); } catch (_) {
+      out.scrollIntoView(true);
     }
-    setTimeout(function () { ignoreScroll = false; }, 700);
   }
 
-  // Retry a few times to land through layout-shift during the first second.
-  function scrollToOutputRetry(alignEnd) {
-    scrollToOutput(alignEnd);
-    [150, 400, 800, 1400].forEach(function (ms) {
-      setTimeout(function () { scrollToOutput(alignEnd); }, ms);
+  // Retry scrollPageToOutput a few times to handle layout shifts.
+  function scrollToOutputRetry() {
+    scrollPageToOutput();
+    [200, 500, 1000].forEach(function (ms) {
+      setTimeout(scrollPageToOutput, ms);
     });
   }
 
-  // Update autoFollow based on whether the user is near the bottom of the
-  // real scroll container (not just the document root).
-  function onScrollEvent() {
+  // When user scrolls the inner panel, decide whether to keep auto-following.
+  function onPanelScroll() {
     if (ignoreScroll) return;
-    var out = document.getElementById('quest-output');
-    var container = out
-      ? scrollableAncestor(out)
-      : (document.scrollingElement || document.documentElement);
-    var isDocRoot = (container === document.documentElement ||
-                     container === (document.scrollingElement || document.documentElement));
-    var scrollTop = isDocRoot
-      ? (window.scrollY || document.documentElement.scrollTop || 0)
-      : container.scrollTop;
-    var viewH     = isDocRoot ? window.innerHeight : container.clientHeight;
-    autoFollow = (container.scrollHeight - scrollTop - viewH) < 320;
+    var panel = outputPanel();
+    if (!panel) return;
+    var distFromBottom = panel.scrollHeight - panel.scrollTop - panel.clientHeight;
+    autoFollow = distFromBottom < 80;
   }
 
-  // Listen on the window (document-level scroll) always.
-  window.addEventListener('scroll', onScrollEvent, { passive: true });
-
   function watchOutput() {
     var out = document.getElementById('quest-output');
     if (!out) { setTimeout(watchOutput, 600); return; }
 
-    // If the real scroll container is an inner element, also listen there so
-    // that user scrolling within it correctly flips autoFollow off.
-    var container = scrollableAncestor(out);
-    var isDocRoot = (container === document.documentElement ||
-                     container === (document.scrollingElement || document.documentElement));
-    if (!isDocRoot) {
-      container.addEventListener('scroll', onScrollEvent, { passive: true });
+    // Attach scroll listener to the panel once it exists.
+    function attachPanelListener() {
+      var panel = outputPanel();
+      if (!panel) { setTimeout(attachPanelListener, 400); return; }
+      panel.addEventListener('scroll', onPanelScroll, { passive: true });
     }
+    attachPanelListener();
 
     new MutationObserver(function () {
-      if (autoFollow) scrollToOutput(true);
+      if (autoFollow) followOutputBottom();
     }).observe(out, { childList: true, subtree: true });
   }
   watchOutput();
 
-  // On Run click: jump to top of output and re-enable following.
+  // On Run click: scroll page to show output card and re-enable auto-follow.
   document.addEventListener('click', function (e) {
     var wrapper = document.getElementById('quest-run-btn');
     if (wrapper && wrapper.contains(e.target)) {
       autoFollow = true;
-      scrollToOutputRetry(false);
+      scrollToOutputRetry();
     }
   }, true);
 }