Update app.py

app.py

@@ -12,21 +12,25 @@ st.set_page_config(
 # --- Custom CSS for Sticky Default Header ---
 st.markdown("""
 <style>
-    /* Make the default Streamlit header sticky */
+    /* Target the default Streamlit header element */
+    /* This is typically the <header> tag containing the title, menu, and status */
     header {
         position: sticky; /* Use sticky positioning */
         top: 0px;         /* Stick to the top edge */
         z-index: 999;     /* Ensure the header is always on top */
         background-color: rgb(255, 255, 255); /* Use white background or match Streamlit's default header color */
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */
-        /* Adjust padding/height if needed, but default usually works well with sticky */
+        /* Ensure no conflicting height/overflow properties that might break sticky */
+        height: auto; /* Allow height to adjust based on content */
+        overflow: visible; /* Prevent content inside header from being clipped */
     }
 
     /* Add padding to the main content area to prevent it from starting behind the sticky header */
     /* This targets the main container div where your app content and pages are rendered */
     /* The exact value might need slight adjustment based on the header's actual height */
+    /* Inspect the deployed app to confirm the header height and adjust padding-top accordingly */
     [data-testid="stAppViewContainer"] {
-        padding-top: 60px; /* Estimate header height (~60px). Adjust if needed. */
+        padding-top: 60px; /* Estimate header height (~60px). Adjust if needed after inspection. */
     }
 
     /* Adjust padding for the sidebar content as well */
@@ -40,6 +44,20 @@ st.markdown("""
         padding-top: 1rem; /* Keep or adjust default Streamlit content padding */
     }
 
+    /* If the above 'header' sticky rule still doesn't work for the main scrollbar
+       after adjusting padding-top, it strongly indicates a parent element issue.
+       You would need to use browser dev tools to find which parent is breaking it
+       and potentially try applying sticky to that parent, but that is more complex.
+       For example, if a div wrapping the header and main content had overflow: auto:
+       div[data-testid="some-parent-container"] {
+           position: sticky;
+           top: 0;
+           z-index: 998; // Lower z-index than the header
+           background: white;
+       }
+       This is hypothetical and requires DOM inspection.
+    */
+
 </style>
 """, unsafe_allow_html=True)