Update src/streamlit_app.py

src/streamlit_app.py

@@ -84,52 +84,44 @@ st.markdown("""
       box-shadow: 0 0 5px rgba(255, 75, 75, 0.5) !important;
   }
 
-  /* left/right helper classes (still usable if you wrap content in html containers) */
-  .left-scroll, .right-scroll {
-      max-height: calc(100vh - 160px);
-      overflow-y: auto;
-      overflow-x: auto;
-      padding: 8px;
-      border: 1px solid #e6e6e6;
-      border-radius: 6px;
-      background: #ffffff;
+  /* Make sure the top-level containers allow children to create scroll contexts */
+  html, body, #root, #root>div, [data-testid="stAppViewContainer"], .block-container, .css-1lcbmhc, .main {
+    overflow: visible !important;
+    height: auto !important;
+    min-height: 100vh !important;
   }
-  .left-scroll canvas, .left-scroll img, .right-scroll canvas, .right-scroll img {
-      max-width: 100% !important;
-      height: auto !important;
-      display: block;
+
+  /* Force the Streamlit app column elements to be scrollable */
+  div[data-testid="column"], .stColumns, .stContainer {
+    max-height: calc(100vh - 160px) !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    position: relative !important;
   }
 
-  /* Make column elements create independent scroll areas:
-     - give them a fixed-ish max-height relative to viewport
-     - force overflow-y: auto so they show their own scrollbar
-  */
-  div[data-testid="column"] {
-      /* room for header + padding; tune the 140px to your UI if needed */
-      max-height: calc(100vh - 140px) !important;
-      overflow-y: auto !important;
-      overflow-x: hidden !important;
-      position: relative !important;
+  /* small helper scroll classes (if you wrap with these) */
+  .left-scroll, .right-scroll {
+    max-height: calc(100vh - 160px);
+    overflow-y: auto;
+    overflow-x: auto;
+    padding: 8px;
+    border: 1px solid #e6e6e6;
+    border-radius: 6px;
+    background: #ffffff;
   }
 
-  /* keep canvas/images from forcing expansion */
+  /* make canvas/images not expand the column */
   div[data-testid="column"] img,
   div[data-testid="column"] canvas {
-      max-width: 100% !important;
-      height: auto !important;
-      display: block !important;
+    max-width: 100% !important;
+    height: auto !important;
+    display: block !important;
   }
 
-  /* Thin subtle scrollbars for WebKit */
+  /* subtle WebKit scrollbar */
   div[data-testid="column"]::-webkit-scrollbar { width: 10px; height: 10px; }
   div[data-testid="column"]::-webkit-scrollbar-thumb { border-radius: 8px; background-color: rgba(0,0,0,0.12); }
   div[data-testid="column"]::-webkit-scrollbar-track { background: transparent; }
-
-  /* IMPORTANT: remove any rule that forcibly hides page scrollbars.
-     If you previously set overflow: hidden on the main container it prevents children from scrolling properly.
-     DO NOT set `overflow: hidden` on the top-level app container.
-  */
-  /* removed: [data-testid="stAppViewContainer"] > .main { overflow: hidden !important; height: 100vh !important; } */
 </style>
 
 """, unsafe_allow_html=True)