Update app.py

app.py

@@ -1,66 +1,63 @@
 import streamlit as st
-# No need to import time if not simulating task here
 
 # --- Page Configuration ---
 # This sets the title and icon that appear in the default header
 st.set_page_config(
-    page_title="SBS V2.0 mapper", # This title will appear in the fixed header
-    page_icon=":material/keyboard:", # This icon can also appear in the header
+    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
 )
 
-# --- Custom CSS for Fixed Default Header ---
+# --- Custom CSS for Sticky Default Header ---
 st.markdown("""
 <style>
-    /* Make the default Streamlit header fixed at the top */
+    /* Make the default Streamlit header sticky */
     header {
-        position: fixed; /* Use fixed positioning for viewport-relative stickiness */
-        top: 0;         /* Position from the top edge */
-        left: 0;        /* Position from the left edge */
-        width: 100%;    /* Span the full width of the viewport */
-        z-index: 100;   /* Ensure the header is above other content */
-        background-color: rgb(240, 242, 246); /* Match Streamlit's default header background color */
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
-        /* You might need to adjust padding if the default header height changes */
+        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 */
     }
 
-    /* Add padding to the main content area to prevent it from being hidden behind the fixed header */
-    /* This targets the main container div below the header and sidebar */
-    /* You might need to inspect the Streamlit app's HTML structure in your browser
-       (using developer tools) to find the precise data-testid or class for this div
-       if "stAppViewContainer" or "stVerticalBlock" doesn't work reliably,
-       but stAppViewContainer is a common target. */
+    /* 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 */
     [data-testid="stAppViewContainer"] {
-        padding-top: 70px; /* Adjust this value to be slightly more than your header's height */
+        padding-top: 60px; /* Estimate header height (~60px). Adjust if needed. */
     }
 
-    /* Also add padding to the sidebar content */
+    /* Adjust padding for the sidebar content as well */
      [data-testid="stSidebar"] {
-         padding-top: 70px; /* Use the same padding value as the main content */
+         padding-top: 60px; /* Use the same padding value as the main content */
      }
 
-     /* If the layout is 'wide', adjust the padding on the main container */
-     /* This helps keep content aligned if the header has internal padding/margins */
+    /* 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; /* Or match default streamlit content padding */
+        padding-top: 1rem; /* Keep or adjust default Streamlit content padding */
     }
 
-
 </style>
 """, unsafe_allow_html=True)
 
-# --- App Content (will scroll below the fixed header) ---
+# --- App Content (will scroll below the sticky header) ---
 
-# The logo placed here will likely appear in the sidebar or main body,
-# not in the fixed default header. Use st.set_page_config for the header icon.
+# 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.
 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 fixed header,
-# as they are part of the main app content flow.
+# 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")
 
@@ -70,7 +67,7 @@ st.subheader("Select specific Chapter for quicker results")
 type_text_page = st.Page(
     page="pages/type_text.py",
     title="DEMO (work in progress)",
-    icon=":material/keyboard:",
+    icon=":material/keyboard:", # This icon can appear in the tab/bookmark
     default=True,
 )
 
@@ -78,5 +75,6 @@ pg = st.navigation(pages=[type_text_page]) # WITHOUT SECTIONS
 pg.run()
 
 # Add some extra content to make the page scrollable for testing
-for i in range(100): # Increased lines to ensure sufficient scrolling
+# 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}")