fix: library panels full width, hidden rows off-screen

app.py

@@ -59,12 +59,20 @@ body { background: #0A0F1E !important; margin: 0 !important; }
     box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important;
 }
 
-/* ── Rows are collapsed but NOT display:none so Gradio attaches event handlers ── */
+/* ── Rows are moved off-screen but NOT display:none so Gradio attaches event
+   handlers; height:0 + overflow:visible let their textboxes bleed into the
+   page as a dark full-width bar, so park them off-viewport instead. ── */
 #hidden-row-status,
 #hidden-row-question {
-    height: 0 !important;
+    position: fixed !important;
+    top: -9999px !important;
+    left: -9999px !important;
+    width: 1px !important;
+    height: 1px !important;
     min-height: 0 !important;
-    overflow: visible !important;
+    overflow: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
     margin: 0 !important;
     padding: 0 !important;
     border: none !important;

ui/index.html

@@ -220,7 +220,8 @@
     /* ── Library wings — full-height public-library decor on both edges ──── */
     .library {
       position: fixed; top: 0; bottom: 0; z-index: 0;
-      width: clamp(190px, calc((100vw - 850px) / 2), 340px);
+      /* stretch right up to the 760px centre column (20px breathing room) */
+      width: max(190px, calc((100vw - 800px) / 2));
       display: flex; flex-direction: column; justify-content: space-between;
       gap: 12px; padding: 26px 18px 0;
       background:
@@ -231,7 +232,7 @@
     }
     .library-left  { left: 0;  border-right: 1px solid var(--border); box-shadow: 18px 0 40px -20px rgba(0,0,0,.6); }
     .library-right { right: 0; border-left: 1px solid var(--border); box-shadow: -18px 0 40px -20px rgba(0,0,0,.6); }
-    @media (max-width: 1240px) { .library { display: none; } }
+    @media (max-width: 1180px) { .library { display: none; } }
 
     /* bookshelf rows — books bottom-align on a wood plank */
     .lib-shelf {
@@ -239,7 +240,10 @@
       display: flex; align-items: flex-end; gap: 4px; padding: 0 8px;
       border-bottom: 7px solid #3B2D23;
       box-shadow: 0 9px 12px -7px rgba(0,0,0,.6);
+      overflow: hidden; /* shelves are over-filled; surplus books clip at the edge */
     }
+    .lib-shelf.pad-l { padding-left: 64px; }  /* room for a robot on the left */
+    .lib-shelf.pad-r { padding-right: 64px; } /* room for a robot / ladder on the right */
 
     .bk {
       display: block; flex-shrink: 0;
@@ -878,27 +882,35 @@
 <!-- ── Library wings — full-height decor flanking the app (decorative) ──── -->
 <div class="library library-left" aria-hidden="true">
   <div class="lib-shelf">
-    <i class="bk b1" style="--h:48px"></i><i class="bk b4 slim" style="--h:34px"></i>
-    <i class="bk b6" style="--h:52px"></i><i class="bk b5" style="--h:30px"></i>
-    <i class="bk b3 wide" style="--h:44px"></i><i class="bk b2 lean" style="--h:38px"></i>
-    <i class="bk b8" style="--h:54px"></i><i class="bk b7 slim" style="--h:36px"></i>
-    <i class="bk b1" style="--h:46px"></i><i class="bk b4" style="--h:32px"></i>
-    <i class="bk b5 slim" style="--h:42px"></i>
+    <i class="bk b2" style="--h:36px"></i><i class="bk b3" style="--h:50px"></i><i class="bk b1 slim" style="--h:56px"></i><i class="bk b6" style="--h:40px"></i>
+    <i class="bk b1 lean" style="--h:34px"></i><i class="bk b6" style="--h:34px"></i><i class="bk b7 slim" style="--h:44px"></i><i class="bk b4" style="--h:46px"></i>
+    <i class="bk b3 slim" style="--h:28px"></i><i class="bk b8 slim lean" style="--h:50px"></i><i class="bk b3" style="--h:52px"></i><i class="bk b4" style="--h:40px"></i>
+    <i class="bk b1" style="--h:38px"></i><i class="bk b6" style="--h:28px"></i><i class="bk b7" style="--h:30px"></i><i class="bk b4" style="--h:36px"></i>
+    <i class="bk b8 slim" style="--h:56px"></i><i class="bk b7" style="--h:34px"></i><i class="bk b6" style="--h:48px"></i><i class="bk b2 slim" style="--h:30px"></i>
+    <i class="bk b8" style="--h:36px"></i><i class="bk b4 slim" style="--h:38px"></i><i class="bk b2" style="--h:34px"></i><i class="bk b7" style="--h:56px"></i>
+    <i class="bk b6 slim" style="--h:46px"></i><i class="bk b5 slim" style="--h:32px"></i><i class="bk b4" style="--h:56px"></i><i class="bk b7 slim" style="--h:34px"></i>
+    <i class="bk b6" style="--h:52px"></i><i class="bk b8 lean" style="--h:54px"></i>
   </div>
-  <div class="lib-shelf" style="justify-content:flex-end">
-    <i class="bk b3" style="--h:42px"></i><i class="bk b2 wide" style="--h:50px"></i>
-    <i class="bk b5 lean" style="--h:32px"></i><i class="bk b6" style="--h:46px"></i>
-    <i class="bk b4 slim" style="--h:36px"></i><i class="bk b1" style="--h:52px"></i>
-    <i class="bk b7" style="--h:38px"></i>
+  <div class="lib-shelf pad-l">
+    <i class="bk b6" style="--h:30px"></i><i class="bk b2 wide" style="--h:46px"></i><i class="bk b7" style="--h:48px"></i><i class="bk b4" style="--h:56px"></i>
+    <i class="bk b7 lean" style="--h:36px"></i><i class="bk b6" style="--h:36px"></i><i class="bk b7" style="--h:56px"></i><i class="bk b5" style="--h:34px"></i>
+    <i class="bk b2" style="--h:30px"></i><i class="bk b8 lean" style="--h:30px"></i><i class="bk b2 slim" style="--h:40px"></i><i class="bk b6" style="--h:40px"></i>
+    <i class="bk b5 wide" style="--h:44px"></i><i class="bk b3 wide" style="--h:54px"></i><i class="bk b1 slim" style="--h:30px"></i><i class="bk b6 slim" style="--h:52px"></i>
+    <i class="bk b7" style="--h:36px"></i><i class="bk b4" style="--h:28px"></i><i class="bk b7 wide" style="--h:36px"></i><i class="bk b5 slim" style="--h:44px"></i>
+    <i class="bk b8 slim" style="--h:54px"></i><i class="bk b6" style="--h:34px"></i><i class="bk b2" style="--h:32px"></i><i class="bk b6 wide" style="--h:56px"></i>
+    <i class="bk b5 wide lean" style="--h:46px"></i><i class="bk b1" style="--h:38px"></i><i class="bk b8 slim" style="--h:34px"></i><i class="bk b1" style="--h:46px"></i>
     <div class="mini-bot bot-reader"><div class="mini-head"><span class="mini-eye"></span><span class="mini-eye"></span></div><div class="mini-body"></div></div>
   </div>
   <div class="lib-aisle"><div class="aisle-end"></div><span class="aisle-bot"></span></div>
   <div class="lib-tall">
-    <div class="lib-shelf">
-      <i class="bk b8" style="--h:50px"></i><i class="bk b1 slim" style="--h:34px"></i>
-      <i class="bk b5" style="--h:42px"></i><i class="bk b3 lean" style="--h:36px"></i>
-      <i class="bk b2" style="--h:52px"></i><i class="bk b7 slim" style="--h:30px"></i>
-      <i class="bk b6 wide" style="--h:44px"></i>
+    <div class="lib-shelf pad-r">
+    <i class="bk b2" style="--h:42px"></i><i class="bk b8" style="--h:52px"></i><i class="bk b5 slim" style="--h:32px"></i><i class="bk b7" style="--h:44px"></i>
+    <i class="bk b2" style="--h:54px"></i><i class="bk b3 wide" style="--h:52px"></i><i class="bk b7 slim" style="--h:50px"></i><i class="bk b3" style="--h:48px"></i>
+    <i class="bk b7" style="--h:56px"></i><i class="bk b5 lean" style="--h:34px"></i><i class="bk b3" style="--h:44px"></i><i class="bk b2" style="--h:28px"></i>
+    <i class="bk b1 slim" style="--h:28px"></i><i class="bk b3" style="--h:28px"></i><i class="bk b8 lean" style="--h:44px"></i><i class="bk b6" style="--h:44px"></i>
+    <i class="bk b2 slim" style="--h:56px"></i><i class="bk b6" style="--h:34px"></i><i class="bk b8" style="--h:40px"></i><i class="bk b2 lean" style="--h:48px"></i>
+    <i class="bk b5" style="--h:54px"></i><i class="bk b7" style="--h:48px"></i><i class="bk b6" style="--h:40px"></i><i class="bk b7" style="--h:54px"></i>
+    <i class="bk b1 lean" style="--h:34px"></i><i class="bk b3" style="--h:36px"></i><i class="bk b5" style="--h:56px"></i><i class="bk b1" style="--h:54px"></i>
     </div>
     <div class="lib-ladder"></div>
     <div class="mini-bot bot-climber"><div class="mini-head"><span class="mini-eye"></span><span class="mini-eye"></span></div><div class="mini-body"></div></div>
@@ -914,26 +926,36 @@
 </div>
 
 <div class="library library-right" aria-hidden="true">
-  <div class="lib-shelf">
-    <i class="bk b2" style="--h:46px"></i><i class="bk b3 wide" style="--h:52px"></i>
-    <i class="bk b5 lean" style="--h:32px"></i><i class="bk b6" style="--h:40px"></i>
-    <i class="bk b1 slim" style="--h:48px"></i><i class="bk b4" style="--h:34px"></i>
-    <i class="bk b8" style="--h:44px"></i>
+  <div class="lib-shelf pad-r">
+    <i class="bk b2" style="--h:44px"></i><i class="bk b8" style="--h:30px"></i><i class="bk b7 slim" style="--h:32px"></i><i class="bk b4" style="--h:34px"></i>
+    <i class="bk b8 lean" style="--h:28px"></i><i class="bk b1 wide" style="--h:36px"></i><i class="bk b8 slim" style="--h:36px"></i><i class="bk b4 slim" style="--h:50px"></i>
+    <i class="bk b8" style="--h:50px"></i><i class="bk b4 lean" style="--h:36px"></i><i class="bk b1" style="--h:44px"></i><i class="bk b2 slim" style="--h:28px"></i>
+    <i class="bk b1" style="--h:44px"></i><i class="bk b8" style="--h:28px"></i><i class="bk b5 lean" style="--h:32px"></i><i class="bk b1 slim" style="--h:34px"></i>
+    <i class="bk b5" style="--h:56px"></i><i class="bk b6" style="--h:46px"></i><i class="bk b1 slim" style="--h:40px"></i><i class="bk b7 lean" style="--h:44px"></i>
+    <i class="bk b3" style="--h:50px"></i><i class="bk b4" style="--h:40px"></i><i class="bk b2 slim" style="--h:36px"></i><i class="bk b5" style="--h:52px"></i>
+    <i class="bk b1" style="--h:46px"></i><i class="bk b2" style="--h:34px"></i><i class="bk b6" style="--h:56px"></i><i class="bk b3 wide" style="--h:56px"></i>
     <div class="mini-bot bot-sleeper"><div class="mini-head"><span class="mini-eye"></span><span class="mini-eye"></span></div><div class="mini-body"></div><span class="zz">z</span><span class="zz">z</span><span class="zz">z</span></div>
   </div>
-  <div class="lib-shelf">
-    <i class="bk b7" style="--h:38px"></i><i class="bk b1 wide" style="--h:50px"></i>
-    <i class="bk b4 slim" style="--h:30px"></i><i class="bk b8 lean" style="--h:40px"></i>
-    <i class="bk b5" style="--h:52px"></i><i class="bk b2 slim" style="--h:34px"></i>
-    <i class="bk b3" style="--h:44px"></i><i class="bk b6" style="--h:36px"></i>
+  <div class="lib-shelf" style="padding-right:46px">
+    <i class="bk b4" style="--h:32px"></i><i class="bk b5 slim" style="--h:50px"></i><i class="bk b3 slim" style="--h:52px"></i><i class="bk b7" style="--h:48px"></i>
+    <i class="bk b8" style="--h:56px"></i><i class="bk b2" style="--h:56px"></i><i class="bk b1 slim" style="--h:32px"></i><i class="bk b4" style="--h:34px"></i>
+    <i class="bk b7" style="--h:48px"></i><i class="bk b6 wide lean" style="--h:44px"></i><i class="bk b8" style="--h:48px"></i><i class="bk b4 slim" style="--h:28px"></i>
+    <i class="bk b1" style="--h:32px"></i><i class="bk b7 wide" style="--h:32px"></i><i class="bk b6 lean" style="--h:50px"></i><i class="bk b1" style="--h:56px"></i>
+    <i class="bk b7 wide" style="--h:44px"></i><i class="bk b1 slim" style="--h:46px"></i><i class="bk b6" style="--h:32px"></i><i class="bk b1" style="--h:56px"></i>
+    <i class="bk b8" style="--h:38px"></i><i class="bk b2 slim" style="--h:48px"></i><i class="bk b1" style="--h:44px"></i><i class="bk b8" style="--h:46px"></i>
+    <i class="bk b6 lean" style="--h:56px"></i><i class="bk b2 wide" style="--h:52px"></i><i class="bk b3 wide" style="--h:28px"></i><i class="bk b2 slim" style="--h:38px"></i>
     <div class="lib-plant"></div>
   </div>
   <div class="lib-aisle"><div class="aisle-end"></div><span class="aisle-bot" style="animation-delay:-4s"></span></div>
   <div class="lib-tall">
-    <div class="lib-shelf" style="justify-content:flex-end">
-      <i class="bk b6" style="--h:44px"></i><i class="bk b4 slim" style="--h:30px"></i>
-      <i class="bk b1" style="--h:52px"></i><i class="bk b5 lean" style="--h:36px"></i>
-      <i class="bk b3 wide" style="--h:42px"></i><i class="bk b2" style="--h:34px"></i>
+    <div class="lib-shelf pad-l" style="justify-content:flex-end">
+    <i class="bk b7 slim" style="--h:54px"></i><i class="bk b6 slim" style="--h:36px"></i><i class="bk b2 slim" style="--h:30px"></i><i class="bk b5 wide" style="--h:54px"></i>
+    <i class="bk b4" style="--h:54px"></i><i class="bk b3" style="--h:52px"></i><i class="bk b8" style="--h:28px"></i><i class="bk b6" style="--h:38px"></i>
+    <i class="bk b3 wide" style="--h:52px"></i><i class="bk b4 lean" style="--h:44px"></i><i class="bk b8" style="--h:28px"></i><i class="bk b1 wide" style="--h:36px"></i>
+    <i class="bk b3" style="--h:36px"></i><i class="bk b1" style="--h:40px"></i><i class="bk b4 slim lean" style="--h:38px"></i><i class="bk b6" style="--h:56px"></i>
+    <i class="bk b5" style="--h:28px"></i><i class="bk b7" style="--h:44px"></i><i class="bk b8" style="--h:50px"></i><i class="bk b6 slim lean" style="--h:34px"></i>
+    <i class="bk b1 wide" style="--h:56px"></i><i class="bk b4 slim" style="--h:48px"></i><i class="bk b8" style="--h:56px"></i><i class="bk b3" style="--h:48px"></i>
+    <i class="bk b5 lean" style="--h:50px"></i><i class="bk b2" style="--h:48px"></i><i class="bk b5 slim" style="--h:56px"></i><i class="bk b2 slim" style="--h:36px"></i>
     </div>
     <div class="mini-bot bot-fetcher"><div class="mini-head"><span class="mini-eye"></span><span class="mini-eye"></span></div><div class="mini-body"></div></div>
   </div>
@@ -950,7 +972,6 @@
   </div>
 </div>
 
-
   <div id="app">
     <!-- Hero — cinematic amphitheater with AI professor -->
     <header class="hero">