Update app.py

app.py

@@ -781,10 +781,85 @@ html,body,.gradio-container{
 .gr-textbox textarea[readonly]{ background:#111827 !important; color:#f9fafb !important; border:1px solid #374151 !important; }
 .gr-dropdown,.gr-dropdown .gr-box{ background:#fff !important; border:1px solid var(--border) !important; border-radius:8px !important; }
 """
+TOC_FIX = """
+<style>
+/* --- Keep fixed elements from breaking inside Gradio containers --- */
+.gradio-container{ overflow:visible !important; }
+.gradio-container, .gradio-container > *{ transform:none !important; }
+
+/* --- Host created by the script; this is the real fixed TOC --- */
+#toc-fixed{
+  position:fixed; top:0; left:0;
+  height:100vh; width:320px;           /* matches your --tocw */
+  z-index:9999; overflow-y:auto;
+  background:#fff; border-right:1px solid #e5e7eb;
+  padding:1rem; box-sizing:border-box;
+}
+
+/* When fixed mode is active, keep the original column's space but hide its content */
+.toc-fixed-active #toc-column{ visibility:hidden; }
+
+/* Mobile: disable fixed TOC (normal flow) */
+@media (max-width: 899.98px){
+  #toc-fixed{ display:none; }
+  .toc-fixed-active #toc-column{ visibility:visible; }
+}
+</style>
+
+<script>
+(function(){
+  const MIN_W = 900;  // desktop threshold
+
+  function mountFixedTOC(){
+    const col = document.getElementById('toc-column');
+    const nav = col && col.querySelector('nav#toc');
+    if(!col || !nav) return;
+
+    const isDesktop = window.innerWidth >= MIN_W;
+    let fixed = document.getElementById('toc-fixed');
+
+    if(isDesktop){
+      // create fixed host if missing
+      if(!fixed){
+        fixed = document.createElement('aside');
+        fixed.id = 'toc-fixed';
+        document.body.appendChild(fixed);
+      }
+      // move the nav into the fixed host
+      if(nav.parentElement !== fixed){
+        fixed.innerHTML = '';
+        fixed.appendChild(nav);
+      }
+      // align the fixed TOC with the placeholder column
+      const rect = col.getBoundingClientRect();
+      fixed.style.left = (rect.left + window.scrollX) + 'px';
+      fixed.style.width = getComputedStyle(col).width;
+
+      document.documentElement.classList.add('toc-fixed-active');
+    }else{
+      // mobile: put nav back into the original column
+      if(fixed && nav.parentElement === fixed){
+        col.appendChild(nav);
+      }
+      document.documentElement.classList.remove('toc-fixed-active');
+    }
+  }
+
+  // Run on load, after hydration, on resize, and when layout shifts
+  document.addEventListener('DOMContentLoaded', mountFixedTOC);
+  window.addEventListener('resize', mountFixedTOC);
+  setTimeout(mountFixedTOC, 300);
+
+  const target = document.querySelector('.gradio-container') || document.body;
+  new ResizeObserver(mountFixedTOC).observe(target);
+})();
+</script>
+"""
+
 
 with gr.Blocks(css=CSS, fill_height=True, title="Interactive Blog — Transformers Feature Showcase") as demo:
     gr.HTML(HLJS)
-    
+    gr.HTML(TOC_FIX)
     with gr.Row(elem_id="layout-row"):
         # This column holds the Table of Contents. It is fixed on desktop.
         with gr.Column(scale=1, min_width=300, elem_id="toc-column"):