app.py

import streamlit as st

# ---- HEADER CONFIGURATION ----
# 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,
    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;
    }
</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)

# --- 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()