Update app.py

app.py

@@ -1,85 +1,84 @@
-import streamlit as st 
+import streamlit as st
 
-# Custom CSS to ensure sticky header in both Streamlit and Hugging Face environments
-st.markdown("""
+# ---- HEADER CONFIGURATION ----
+# More precise CSS selectors and properties for cross-platform compatibility
+custom_css = """
 <style>
-    /* Target both Streamlit native and Hugging Face iframe embedding */
-    /* Make the header sticky */
-    header[data-testid="stHeader"] {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: auto;
-        z-index: 999990;
-        background-color: white;
-        box-shadow: 0 1px 5px rgba(0,0,0,0.1);
+    /* Target the header with multiple selectors for better compatibility */
+    header[data-testid="stHeader"],
+    .stApp > header {
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        width: 100% !important;
+        z-index: 999999 !important;
+        background-color: #90EE90 !important;
+        box-shadow: 0 1px 5px rgba(0,0,0,0.1) !important;
     }
-
-    /* For Hugging Face specific iframe handling */
-    section.main {
-        padding-top: 70px;
+    
+    /* Adjust main content to prevent overlap with fixed header */
+    section[data-testid="stMain"],
+    .main .block-container {
+        padding-top: 60px !important; /* Match your header height */
+        margin-top: 10px !important;
     }
-
-    /* Ensure content doesn't get hidden under the header */
-    .block-container {
-        padding-top: 1rem;
-    }
-
+    
     /* Fix for Hugging Face iframe specific issues */
-    iframe body .stApp {
-        padding-top: 3rem;
+    .st-emotion-cache-lrlib {
+        padding-top: 60px !important;
     }
-
-    /* Alternative approach: Create your own sticky header container */
-    div.sticky-header {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        z-index: 999999;
-        background-color: white;
-        padding: 1rem;
-        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-        /* Ensures content below isn't hidden */
-        margin-bottom: 3rem;
+    
+    /* For Hugging Face specific iframe handling */
+    iframe#streamlit-iframe {
+        padding-top: 0 !important;
     }
-
-    /* Create space below custom sticky header */
-    div.sticky-header-spacer {
-        height: 6rem;
+    
+    /* Target Hugging Face's iframe content specifically */
+    body.hf-w-body .stApp {
+        padding-top: 60px !important;
     }
 </style>
-""", unsafe_allow_html=True)
-
-# Option 1: Using Streamlit's native header (modified with CSS above)
-st.title("My App with Sticky Header")
-
-# Option 2: Custom sticky header implementation
-# Uncomment and use this approach if the CSS-only solution doesn't work
-
-# Custom sticky header container
-st.markdown('<div class="sticky-header">', unsafe_allow_html=True)
-st.title("My App with Custom Sticky Header")
-# Add any other header elements here
-st.markdown('</div>', unsafe_allow_html=True)
-
-# Add spacer to ensure content isn't hidden under the header
-st.markdown('<div class="sticky-header-spacer"></div>', unsafe_allow_html=True)
-
-
-# Rest of your app
-st.write("Scroll down to test the sticky header")
-
-# Add dummy content to enable scrolling
-for i in range(30):
-    st.write(f"Content block {i}")
-    st.write("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
-
-
+"""
+
+# Some Hugging Face deployments need JavaScript for header fixing
+js_fix = """
+<script>
+    // This script helps ensure the header stays fixed in Hugging Face's iframe environment
+    window.addEventListener('DOMContentLoaded', (event) => {
+        // Short delay to ensure DOM is fully loaded
+        setTimeout(() => {
+            const header = document.querySelector('header[data-testid="stHeader"]');
+            if (header) {
+                header.style.position = 'fixed';
+                header.style.top = '0';
+                header.style.zIndex = '999999';
+                header.style.width = '100%';
+                header.style.backgroundColor = '#90EE90';
+                
+                // Add padding to main content
+                const mainContent = document.querySelector('section[data-testid="stMain"]');
+                if (mainContent) {
+                    mainContent.style.paddingTop = '70px';
+                }
+            }
+        }, 100);
+    });
+</script>
+"""
+
+# 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.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")
 st.logo(image="images/menu_book_60dp_75FBFD.png")
@@ -87,9 +86,6 @@ 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 = st.navigation({"Chapter_Index": [start_page], "Demo": [type_text_page, upload_file_page], "About": [about_page]}) # WITH SECTIONS
-pg.run() 
+pg.run()