Update app.py

app.py

@@ -1,149 +1,18 @@
 import streamlit as st
 
-# ---- HEADER CONFIGURATION ----
-# More comprehensive CSS to handle both inner and outer scrollbars
-custom_css = """
+# Simpler, more reliable sticky header implementation
+st.markdown("""
 <style>
-    /* Target the header with multiple selectors for better compatibility */
-    header[data-testid="stHeader"],
-    .stApp > header,
-    div[data-testid="stAppViewBlockContainer"] > header {
-        position: fixed !important;
-        top: 0 !important;
-        left: 0 !important;
-        right: 0 !important;
-        width: 100vw !important;
-        z-index: 999999 !important;
-        background-color: #90EE90 !important;
-        box-shadow: 0 1px 5px rgba(0,0,0,0.1) !important;
-        min-height: 60px !important;
-    }
-    
-    /* Adjust main content to prevent overlap with fixed header */
-    section[data-testid="stMain"],
-    .main .block-container,
-    div[data-testid="stDecoratedAppViewContainer"] div[data-testid="stAppViewContainer"] {
-        padding-top: 70px !important; /* Match your header height + some extra space */
-        margin-top: 10px !important;
-    }
-    
-    /* Target the root element in Hugging Face environment */
-    #root {
-        position: relative !important;
-    }
-    
-    /* Make the iframe itself handle scrolling properly */
-    #streamlit-iframe {
-        overflow: auto !important;
-        height: 100vh !important;
-    }
-    
-    /* Handle outer scrollbar scenario */
-    body {
-        overflow: auto !important;
-    }
-    
-    /* Target both inner and outer scroll containers */
-    .stApp, 
-    div[data-testid="stAppViewBlockContainer"],
-    div.streamlit-container,
-    div[data-testid="stDecoratedAppViewContainer"] {
-        position: relative !important;
-        padding-top: 0 !important;
-    }
-    
-    /* Fix for Hugging Face specific container */
-    .st-emotion-cache-lrlib {
-        padding-top: 60px !important;
-    }
-    
-    /* Handle any custom scrollable containers */
-    div.streamlit-container {
-        overflow: visible !important;
-    }
-    
-    /* Ensure header remains visible with outside scrollbar */
-    body.hf-w-body .stApp {
-        padding-top: 0 !important;
-    }
-    
-    /* Target Hugging Face's specific elements */
-    .gradient-border-wrap {
-        margin-top: 60px !important;
+    /* Basic sticky header */
+    header[data-testid="stHeader"] {
+        position: sticky;
+        top: 0;
+        background-color: #90EE90;
+        z-index: 999;
+        height: auto;
     }
 </style>
-"""
-
-# Enhanced JavaScript for complete handling of both scrollbar scenarios
-js_fix = """
-<script>
-    // This script ensures the header stays fixed in both scrollbar scenarios
-    window.addEventListener('DOMContentLoaded', (event) => {
-        // Function to apply header fixing
-        const fixHeader = () => {
-            // Target the header
-            const header = document.querySelector('header[data-testid="stHeader"]');
-            if (header) {
-                // Make it fixed
-                header.style.position = 'fixed';
-                header.style.top = '0';
-                header.style.zIndex = '999999';
-                header.style.width = '100%';
-                header.style.backgroundColor = '#90EE90';
-                header.style.minHeight = '60px';
-                
-                // Add padding to main content (multiple selectors)
-                const mainContainers = [
-                    document.querySelector('section[data-testid="stMain"]'),
-                    document.querySelector('.main .block-container'),
-                    document.querySelector('div[data-testid="stAppViewContainer"]'),
-                    document.querySelector('div.streamlit-container')
-                ];
-                
-                mainContainers.forEach(container => {
-                    if (container) {
-                        container.style.paddingTop = '70px';
-                    }
-                });
-                
-                // Handle outer scrollbar - make sure header is visible
-                const outerScroll = () => {
-                    const scrollY = window.scrollY || window.pageYOffset;
-                    if (scrollY > 0) {
-                        header.style.top = scrollY + 'px';
-                    } else {
-                        header.style.top = '0';
-                    }
-                };
-                
-                // Apply to both window and any iframe parent
-                window.addEventListener('scroll', outerScroll);
-                if (window.parent && window.parent !== window) {
-                    try {
-                        window.parent.addEventListener('scroll', outerScroll);
-                    } catch (e) {
-                        // Cross-origin issues might prevent this
-                        console.log('Could not attach to parent scroll');
-                    }
-                }
-            }
-        };
-        
-        // Apply immediately
-        fixHeader();
-        
-        // And again after a short delay to ensure all elements are loaded
-        setTimeout(fixHeader, 500);
-        
-        // And one more time after everything is definitely loaded
-        setTimeout(fixHeader, 2000);
-    });
-</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)
+""", unsafe_allow_html=True)
 
 # --- PAGE SETUP ---
 type_text_page = st.Page(
@@ -163,3 +32,4 @@ st.sidebar.text("Demo by JA-RAD")
 # --- NAVIGATION SETUP ---
 pg = st.navigation(pages=[type_text_page]) # WITHOUT SECTIONS
 pg.run()
+