Update app.py

app.py

@@ -1,69 +1,103 @@
 import streamlit as st
 
-# Remove any previous custom CSS styles
-# Create a custom sticky header using Streamlit components
+# Looking at the UCSF example, they use a custom component approach with specific CSS
+# Let's implement a similar solution
 
-# Custom CSS only for basic styling, not position control
+# Custom CSS based on the UCSF implementation
 st.markdown("""
 <style>
-    /* Basic styling for our custom header */
-    .custom-sticky-header {
+    /* CSS similar to UCSF implementation */
+    div.block-container {
+        padding-top: 1rem;
+    }
+    
+    div[data-testid="stDecoratedAppViewContainer"] > div:first-child {
+        position: sticky !important;
+        top: 0 !important;
+        background-color: white;
+        z-index: 999;
+        padding: 0px !important;
+    }
+    
+    /* Custom header styling */
+    .custom-header {
         background-color: #90EE90;
-        padding: 10px 15px;
-        border-bottom: 1px solid #ccc;
-        margin-bottom: 20px;
+        padding: 1rem;
+        border-bottom: 1px solid #ddd;
+        width: 100%;
     }
     
-    /* Hide the default Streamlit header */
-    [data-testid="stHeader"] {
-        visibility: hidden;
-        height: 0;
+    /* Hide default Streamlit header */
+    header[data-testid="stHeader"] {
+        display: none;
     }
     
-    /* Ensure our custom header stays at the top */
-    [data-testid="stVerticalBlock"] > div:first-child {
-        position: sticky !important;
-        top: 0 !important;
-        background-color: white !important;
-        z-index: 999 !important;
+    /* Additional fixes specific to Hugging Face embedding */
+    section[data-testid="stSidebar"] {
+        z-index: 0;
     }
 </style>
 """, unsafe_allow_html=True)
 
-# Create a placeholder for the sticky header at the very top of the app
-# This has to be the first element in your app
-header_container = st.container()
-
-# Use the container to create a custom header
-with header_container:
-    st.markdown("""
-    <div class="custom-sticky-header">
-        <h1>Map descriptions to SBS codes with Sentence Transformer + Reasoning</h1>
-        <h3>Select specific Chapter for quicker results</h3>
-    </div>
-    """, unsafe_allow_html=True)
+# Create a custom header at the very top (this is key)
+# This must be the very first Streamlit element
+with st.container():
+    st.markdown('<div class="custom-header">', unsafe_allow_html=True)
+    col1, col2 = st.columns([1, 9])
     
-    # Add the image directly in the header
-    try:
-        st.image("images/menu_book_60dp_75FBFD.png", width=100)
-    except:
-        # In case the image path doesn't work
-        st.write("Logo image")
+    with col1:
+        # Add logo
+        try:
+            st.image("images/menu_book_60dp_75FBFD.png", width=60)
+        except:
+            st.write("📚")  # Fallback emoji if image doesn't load
+            
+    with col2:
+        st.markdown("""
+        <h2 style="margin: 0; padding: 0;">Map descriptions to SBS codes with Sentence Transformer + Reasoning</h2>
+        <p style="margin: 0; padding: 0;">Select specific Chapter for quicker results</p>
+        """, unsafe_allow_html=True)
+    
+    st.markdown('</div>', unsafe_allow_html=True)
 
-# Add a small spacer
+# Add a bit of spacing
 st.write("")
 
-# Rest of your app works as normal
+# Sidebar content (similar to your original code)
 st.sidebar.header("SBS V2.0 mapper")
 st.sidebar.write("(work in progress)")
 st.sidebar.text("Demo by JA-RAD")
 
-# Your page setup and navigation
+# Page setup
 type_text_page = st.Page(
     page="pages/type_text.py",
     title="DEMO (work in progress)",
     icon=":material/keyboard:",
     default=True,)
 
+# Navigation
 pg = st.navigation(pages=[type_text_page])
-pg.run()
+pg.run()
+
+# Inject CSS and JS as early as possible in your app
+st.markdown(custom_css, unsafe_allow_html=True)
+st.markdown(js_fix, unsafe_allow_html=True)
+
+# --- PAGE SETUP ---
+type_text_page = st.Page(
+    page="pages/type_text.py",
+    title="DEMO (work in progress)",
+    icon=":material/keyboard:",
+    default=True,)
+
+# --- Your Streamlit App ---
+st.title("Map descriptions to SBS codes with Sentence Transformer + Reasoning")
+st.subheader("Select specific Chapter for quicker results")
+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")
+
+# --- NAVIGATION SETUP ---
+pg = st.navigation(pages=[type_text_page]) # WITHOUT SECTIONS
+pg.run()