Update app.py

app.py

@@ -9,28 +9,27 @@ st.set_page_config(
     layout="wide" # Optional: Use wide layout
 )
 
-# --- Custom CSS for Sticky Default Header ---
+# --- Custom CSS for Sticky Default Header (with !important) ---
 st.markdown("""
 <style>
     /* 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 */
-        /* 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 */
+        position: sticky !important; /* Force sticky positioning */
+        top: 0px !important;         /* Force sticking to the top edge */
+        z-index: 999 !important;     /* Force a high z-index */
+        background-color: rgb(255, 255, 255) !important; /* Force background color */
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow (usually doesn't need !important) */
+        /* Ensure no conflicting height/overflow properties */
+        height: auto !important; /* Force height to adjust */
+        overflow: visible !important; /* Force overflow visible */
     }
 
-    /* Add padding to the main content area to prevent it from starting behind the sticky header */
+    /* Add padding to the main content area to prevent it from starting behind the fixed 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 */
+    /* Adjust this value based on the header's actual height after inspecting the deployed app */
     [data-testid="stAppViewContainer"] {
-        padding-top: 60px; /* Estimate header height (~60px). Adjust if needed after inspection. */
+        padding-top: 60px; /* Estimate header height (~60px). Adjust if needed. */
     }
 
     /* Adjust padding for the sidebar content as well */
@@ -39,23 +38,16 @@ st.markdown("""
      }
 
     /* Ensure the main content block within the container also has correct top padding */
-    /* This might be necessary for correct spacing below the header */
     .main .block-container {
         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.
+    /* Ignore the data-testid="stMain" observation for the header stickiness,
+       as stMain is typically the main content area, not the header bar with status.
+       The sticky CSS should target the <header> tag.
+       If you confirmed the element you want sticky is truly not the <header> tag,
+       then the CSS selector above needs to be changed to target that specific element
+       and its parents examined for overflow/transform issues.
     */
 
 </style>