Update app.py

app.py

@@ -1,45 +1,46 @@
 import streamlit as st
 
 # --- Page Configuration ---
-# This sets the title and icon that appear in the default header
+# This still configures the topmost header bar (which won't be sticky)
 st.set_page_config(
-    page_title="SBS V2.0 mapper", # This title will appear in the sticky header
-    # Use the logo image here if you want it in the header (optional)
-    # page_icon="images/menu_book_60dp_75FBFD.png",
-    layout="wide" # Optional: Use wide layout
+    page_title="SBS V2.0 mapper", # This title appears in the topmost bar
+    # page_icon="images/menu_book_60dp_75FBFD.png", # Icon for the topmost bar
+    #layout="wide" # Optional: Use wide layout
 )
 
-# --- Custom CSS to Fix Parent Overflow and Make Header Sticky ---
+# --- Custom CSS to Fix Parent Overflow and Make the Toolbar/Status Bar Sticky ---
 st.markdown("""
 <style>
     /* Target the main app container and ensure its overflow is visible */
-    /* This is crucial for sticky positioning of elements inside it relative to the viewport */
+    /* This is crucial for sticky positioning relative to the viewport */
     [data-testid="stApp"] {
         overflow: visible !important; /* Force overflow to be visible */
     }
 
-    /* Target the default Streamlit header element */
-    /* This is typically the <header> tag containing the title, menu, and status */
-    header {
-        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 (white or match Streamlit's default) */
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow */
-        height: auto !important; /* Force height to adjust */
-        /* overflow: visible !important; /* This might also be needed on the header itself */
+    /* Target the container element that holds the Toolbar (stToolbar) and Status Widget (stStatusWidget) */
+    /* Based on the likely Streamlit DOM structure, this is typically the second direct child div within stAppViewContainer */
+    [data-testid="stAppViewContainer"] > div:nth-child(2) {
+         position: sticky !important; /* Make this specific bar sticky */
+         top: 0px !important;         /* Stick to the top edge of the viewport */
+         z-index: 999 !important;     /* Ensure it's always on top */
+         background-color: rgb(255, 255, 255) !important; /* Background for the sticky bar */
+         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow */
+         /* height: auto !important; */ /* Usually not needed here */
+         /* overflow: visible !important; */ /* Usually not needed here */
     }
 
-    /* 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 */
-    /* Adjust this value based on the header's actual height after inspecting the deployed app */
+    /* Add padding to the main content area to prevent it from starting behind the sticky Toolbar/Status bar */
+    /* Adjust this value to be slightly more than the height of the Toolbar/Status bar (the sticky element) */
+    /* You will likely need to inspect the deployed app to find the exact height of this bar */
     [data-testid="stAppViewContainer"] {
-        padding-top: 60px; /* Estimate header height (~60px). Adjust if needed. */
+        padding-top: 50px; /* Estimate height of the second bar (~50px). Adjust after inspection. */
     }
 
     /* Adjust padding for the sidebar content as well */
+    /* This needs to account for the height of both the topmost bar AND the sticky second bar */
      [data-testid="stSidebar"] {
-         padding-top: 60px; /* Use the same padding value as the main content */
+         /* Estimate height of topmost bar (~40px) + height of sticky bar (~50px) + default sidebar padding (~1rem) */
+         padding-top: calc(40px + 50px + 1rem); /* Adjust pixel values after inspection */
      }
 
     /* Ensure the main content block within the container also has correct top padding */
@@ -47,14 +48,14 @@ st.markdown("""
         padding-top: 1rem; /* Keep or adjust default Streamlit content padding */
     }
 
+
 </style>
 """, unsafe_allow_html=True)
 
-# --- App Content (will scroll below the sticky header) ---
+# --- App Content (will scroll below the sticky SECOND bar) ---
 
 # The st.logo call here will place the logo in the sidebar or main body,
-# not in the sticky default header. If you want a logo in the header,
-# use the page_icon parameter in st.set_page_config above.
+# not in either of the top bars.
 st.logo(image="images/menu_book_60dp_75FBFD.png")
 
 
@@ -62,11 +63,10 @@ st.sidebar.header("SBS V2.0 mapper")
 st.sidebar.write("(work in progress)")
 st.sidebar.text("Demo by JA-RAD")
 
-# Note: st.title and st.subheader here will appear *below* the sticky header,
-# as they are part of the main app content flow. The title in the sticky header
-# comes from st.set_page_config.
-st.title("Map descriptions to SBS codes with Sentence Transformer + Reasoning")
-st.subheader("Select specific Chapter for quicker results")
+# Note: st.title and st.subheader here will appear *below* the sticky second bar,
+# as they are part of the main app content flow.
+st.title("Map descriptions to SBS codes with Sentence Transformer + Reasoning") # This title scrolls
+st.subheader("Select specific Chapter for quicker results") # This subheader scrolls
 
 
 # --- NAVIGATION SETUP ---