Update app.py

app.py

@@ -1,79 +1,99 @@
-import streamlit as st 
-
-# Inspect the header element, go to the "Computed" tab in styles, and find its height.
-HEADER_HEIGHT = "60px"  # EXAMPLE: Adjust this (e.g., "56px", "4rem")
-HEADER_SELECTOR = 'header[data-testid="stHeader"]'
-
-# ---- SELECTOR FOR THE MAIN CONTENT AREA THAT NEEDS PADDING ----
-# Target the first direct div child of the stAppViewContainer which often holds the main scrollable content 
-MAIN_CONTENT_SELECTOR = 'section[data-testid="stMain"]'
-#MAIN_CONTENT_SELECTOR = 'section[data-testid="stMain"] > div:nth-child(1)'
-#MAIN_CONTENT_SELECTOR = 'section[data-testid="stMainBlockContainer"]'
-#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"]'
-#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] > div:nth-child(1)'
-# Alternative if the above doesn't work or if your content is further nested:
-#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] .main-content-wrapper-class'
-# Or, very commonly, Streamlit wraps main content in a div with class "block-container":
-#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] .block-container'
-#MAIN_CONTENT_SELECTOR = '.main .block-container' # A more general selector for block-container
-
-custom_css = f"""
+import streamlit as st
+
+# --- Page Configuration ---
+# This configures the topmost header bar (which WILL now be sticky)
+st.set_page_config(
+    page_title="SBS V2.0 mapper", # This title appears in the sticky topmost bar
+    # Use the logo image here if you want it in the header (optional)
+    # page_icon="images/menu_book_60dp_75FBFD.png", # Icon for the sticky topmost bar
+    layout="wide" # Optional: Use wide layout
+)
+
+# --- Custom CSS to Fix Parent Overflow and Make the TOPMOST Header Bar Sticky ---
+st.markdown("""
 <style>
-    /* Making the Streamlit header sticky */
-    {HEADER_SELECTOR} {{
-        position: -webkit-sticky !important; /* For Safari */
-        position: sticky !important;
-        top: 0 !important;
-        z-index: 9999 !important; /* Very high z-index */
-        background-color: #90EE90 !important; /* Or your app's header background color */
-        /* Add a subtle shadow to make it feel more distinct when content scrolls under */
-        /* box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1); */
-        /*.reportview-container .main .block-container{{ */
-        /*    padding-top: 0rem; */
-        /* }} */
-    }}
-
-    /* Adding padding to the main content area to prevent overlap with the sticky header */
-    {MAIN_CONTENT_SELECTOR} {{
-        padding-top: 10px !important; /* {HEADER_HEIGHT} !important; */
-        /* background-color: yellow !important; */
-        /* border-style: solid !important; */
-        /* border-color: red !important; */
-    }}
-
-    /* Optional: If your app is set to wide mode and the header isn't spanning full width */
-    /* This might be needed if the sticky positioning affects its width calculation. */
-    /*
-    #{HEADER_SELECTOR} {{
-    #    width: 100% !important;
-    #}}
-    #*/
-</style>
-"""
+    /* Target the main app container and ensure its overflow is visible */
+    /* This is crucial for sticky positioning relative to the iframe's viewport */
+    [data-testid="stApp"] {
+        overflow: visible !important; /* Force overflow to be visible */
+    }
 
-# Inject CSS as early as possible in your app
-st.markdown(custom_css, unsafe_allow_html=True)
+    /* Target the default Streamlit TOPMOST header bar (the <header> tag) */
+    header {
+        position: sticky !important; /* Make this specific bar sticky */
+        top: 0px !important;         /* Stick to the top edge of the iframe's viewport */
+        z-index: 999 !important;     /* Ensure it's always on top */
+        background-color: rgb(255, 255, 255) !important; /* Background for the sticky bar (white or match default) */
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow */
+        height: auto !important; /* Force height to adjust based on content */
+        overflow: visible !important; /* Ensure content inside header is visible */
+    }
 
-# --- PAGE SETUP ---
-type_text_page = st.Page(
-    page="pages/type_text.py",
-    title="DEMO (work in progress)",
-    icon=":material/keyboard:",
-    default=True,)
+    /* Ensure the container holding the Toolbar (stToolbar) and Status Widget (stStatusWidget) is NOT sticky */
+    /* This is typically the second direct child div within the stAppViewContainer */
+    [data-testid="stAppViewContainer"] > div:nth-child(2) {
+         position: static !important; /* Ensure it's not sticky or fixed */
+         top: auto !important;        /* Reset top positioning */
+         z-index: auto !important;    /* Reset z-index */
+         /* Remove any background or shadow rules that were applied here if necessary */
+    }
+
+
+    /* Add padding to the main content area to prevent it from starting behind the sticky TOPMOST header bar */
+    /* Adjust this value to be slightly more than the height of the TOPMOST header bar (the sticky element) */
+    /* You will likely need to inspect the deployed app to find the exact height of the <header> */
+    [data-testid="stAppViewContainer"] {
+        padding-top: 60px; /* Estimate height of the topmost sticky bar (~60px). Adjust after inspection. */
+    }
 
+    /* Adjust padding for the sidebar content as well */
+    /* This needs to account only for the height of the sticky topmost bar plus default sidebar padding */
+     [data-testid="stSidebar"] {
+         /* Estimate height of topmost bar (~60px) + default sidebar padding (~1rem, which is approx 16px) */
+         padding-top: calc(60px + 1rem); /* Adjust pixel value after inspection */
+     }
 
-# --- Your Streamlit App ---
-#st.logo(image="images/menu_book_60dp_75FBFD.png")
-st.title("Map descriptions to SBS codes with Sentence Transformer + Reasoning")
-st.subheader("Select specific Chapter for quicker results")
+    /* Ensure the main content block within the container also has correct top padding */
+    .main .block-container {
+        padding-top: 1rem; /* Keep or adjust default Streamlit content padding */
+    }
+
+</style>
+""", unsafe_allow_html=True)
+
+# --- App Content (will scroll below the sticky TOPMOST bar) ---
+
+# The st.logo call here will place the logo in the sidebar or main body,
+# not in either of the top bars. If you want a logo in the sticky header,
+# use the page_icon parameter in st.set_page_config above.
 st.logo(image="images/menu_book_60dp_75FBFD.png")
+
+
 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 topmost bar,
+# as they are part of the main app content flow. The title in the sticky topmost bar
+# comes from st.set_page_config.
+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 ---
+# Keep your existing navigation setup
+type_text_page = st.Page(
+    page="pages/type_text.py",
+    title="DEMO (work in progress)",
+    icon=":material/keyboard:", # This icon can appear in the tab/bookmark
+    default=True,
+)
+
 pg = st.navigation(pages=[type_text_page]) # WITHOUT SECTIONS
-##pg = st.navigation({"Chapter_Index": [start_page], "Demo": [type_text_page, upload_file_page], "About": [about_page]}) # WITH SECTIONS
-pg.run() 
+pg.run()
+
+# Add some extra content to make the page scrollable for testing
+# Remove this loop in your final application if you have enough content already
+for i in range(100):
+    st.write(f"This is scrollable content line {i}")
+