Update app.py

app.py

@@ -1,68 +1,142 @@
 import streamlit as st
 
 # ---- HEADER CONFIGURATION ----
-# More precise CSS selectors and properties for cross-platform compatibility
+# More comprehensive CSS to handle both inner and outer scrollbars
 custom_css = """
 <style>
     /* Target the header with multiple selectors for better compatibility */
     header[data-testid="stHeader"],
-    .stApp > header {
+    .stApp > header,
+    div[data-testid="stAppViewBlockContainer"] > header {
         position: fixed !important;
         top: 0 !important;
         left: 0 !important;
         right: 0 !important;
-        width: 100% !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 {
-        padding-top: 60px !important; /* Match your header height */
+    .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;
     }
     
-    /* Fix for Hugging Face iframe specific issues */
+    /* 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;
     }
     
-    /* For Hugging Face specific iframe handling */
-    iframe#streamlit-iframe {
-        padding-top: 0 !important;
+    /* Handle any custom scrollable containers */
+    div.streamlit-container {
+        overflow: visible !important;
     }
     
-    /* Target Hugging Face's iframe content specifically */
+    /* Ensure header remains visible with outside scrollbar */
     body.hf-w-body .stApp {
-        padding-top: 60px !important;
+        padding-top: 0 !important;
+    }
+    
+    /* Target Hugging Face's specific elements */
+    .gradient-border-wrap {
+        margin-top: 60px !important;
     }
 </style>
 """
 
-# Some Hugging Face deployments need JavaScript for header fixing
+# Enhanced JavaScript for complete handling of both scrollbar scenarios
 js_fix = """
 <script>
-    // This script helps ensure the header stays fixed in Hugging Face's iframe environment
+    // This script ensures the header stays fixed in both scrollbar scenarios
     window.addEventListener('DOMContentLoaded', (event) => {
-        // Short delay to ensure DOM is fully loaded
-        setTimeout(() => {
+        // 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';
+                    }
+                };
                 
-                // Add padding to main content
-                const mainContent = document.querySelector('section[data-testid="stMain"]');
-                if (mainContent) {
-                    mainContent.style.paddingTop = '70px';
+                // 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');
+                    }
                 }
             }
-        }, 100);
+        };
+        
+        // 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>
 """