Make the sidebar fixed

streamlit_app.py

@@ -343,24 +343,73 @@ st.markdown(
     section[data-testid="stSidebar"] {
         background: var(--cream-2);
     }
-    /* Lock the sidebar open on desktop so Restaurant / Branch / Date
-       filters are always one click away. Mobile keeps its slide-out
-       toggle because the sidebar would otherwise eat the whole screen.
-       Selectors cover several Streamlit versions of the collapse chevron
-       — when one matches the others are harmless no-ops. */
+    /* Desktop only (≥ 769 px):
+         (1) Hide the collapse chevron so the sidebar can't be closed.
+         (2) Pin the sidebar to the viewport with `position: fixed` so
+             the Language / Restaurant / Branch / Date / Source /
+             Sign-out section stays in place while the main content
+             scrolls. Selectors stack `html body` + the tag + the
+             `.stSidebar` class + the `[data-testid="stSidebar"]`
+             attribute — specificity (0,0,3,2) — which is high enough
+             to beat any Streamlit Emotion class (.st-emotion-cache-*)
+             that uses 2 classes (0,0,2,0) even when both !important.
+         (3) Match the sidebar width to Streamlit's actual rendered
+             width (336 px, observed via DevTools) and push the main
+             content right by the same amount so nothing slides under.
+       Mobile keeps its slide-out drawer behavior — locking the sidebar
+       open on a phone would consume the entire screen. */
     @media (min-width: 769px) {
+        /* (1) Hide collapse chevron. */
         button[data-testid="stSidebarCollapseButton"],
         button[data-testid="stSidebarCollapsedControl"],
         button[data-testid="collapsedControl"],
         [data-testid="stSidebarCollapseButton"],
-        [data-testid="collapsedControl"] {
-            display: none !important;
-        }
-        /* Belt and suspenders: also catch the chevron rendered inside
-           the sidebar header on newer Streamlit builds. */
+        [data-testid="collapsedControl"],
         section[data-testid="stSidebar"] > div:first-child > button {
             display: none !important;
         }
+
+        /* (2) Pin sidebar to viewport. */
+        html body section.stSidebar[data-testid="stSidebar"],
+        html body section[data-testid="stSidebar"].stSidebar,
+        html body section[data-testid="stSidebar"] {
+            position: fixed !important;
+            top: 0 !important;
+            left: 0 !important;
+            bottom: 0 !important;
+            height: 100vh !important;
+            max-height: 100vh !important;
+            width: 336px !important;
+            min-width: 336px !important;
+            max-width: 336px !important;
+            z-index: 999 !important;
+            overflow-y: auto !important;
+            transform: none !important;
+        }
+        /* Inner content of the sidebar also gets a fixed viewport
+           height + its own scroll so long sidebars don't break the
+           layout. */
+        section[data-testid="stSidebar"] > div,
+        [data-testid="stSidebarContent"],
+        [data-testid="stSidebarUserContent"] {
+            height: 100vh !important;
+            max-height: 100vh !important;
+            overflow-y: auto !important;
+        }
+
+        /* (3) Push the main content right by the sidebar's width. */
+        html body [data-testid="stMain"],
+        html body section[data-testid="stMain"],
+        html body .main,
+        html body div.main,
+        html body .main .block-container,
+        html body [data-testid="stAppViewContainer"] > .main {
+            margin-left: 336px !important;
+        }
+        /* Header bar already spans full width — leave it alone. */
+        [data-testid="stHeader"] {
+            margin-left: 0 !important;
+        }
     }
     .small-caption {
         color: var(--muted);