app.py

import streamlit as st

# ---- HEADER CONFIGURATION ----
# More precise CSS selectors and properties for cross-platform compatibility
custom_css = """
<style>
    /* 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;
    }
    
    /* 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;
    }
    
    /* Fix for Hugging Face iframe specific issues */
    .st-emotion-cache-lrlib {
        padding-top: 60px !important;
    }
    
    /* For Hugging Face specific iframe handling */
    iframe#streamlit-iframe {
        padding-top: 0 !important;
    }
    
    /* Target Hugging Face's iframe content specifically */
    body.hf-w-body .stApp {
        padding-top: 60px !important;
    }
</style>
"""

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