Update pages/type_text.py

pages/type_text.py

@@ -9,6 +9,82 @@ import time
 import os
 os.getenv("HF_TOKEN") 
 
+# Determine approximate header height (Streamlit's header is ~54-60px, or 3.375rem to 3.75rem)
+# You might need to inspect element in your browser to get the exact height for your version/theme.
+# Let's use 3.5rem as a common estimate.
+HEADER_HEIGHT_REM = 3.5
+# We also need to account for any default padding Streamlit puts on the main content area.
+# Let's add a little buffer or use a value that ensures content is clearly below.
+# Or, you can be more precise if you know the exact structure.
+MAIN_CONTENT_PADDING_TOP_REM = HEADER_HEIGHT_REM + 1.0 # Header height + 1rem buffer
+
+st.markdown(
+    f"""
+    <style>
+        /* Target Streamlit's built-in header */
+        header[data-testid="stHeader"] {{
+            position: -webkit-sticky; /* For Safari */
+            position: sticky;
+            top: 0;
+            /*
+            Streamlit's header already has a z-index (e.g., 1030) and background color.
+            If you find it necessary, uncomment and adjust these:
+            z-index: 1031 !important;
+            background-color: var(--streamlit-header-background-color, var(--secondary-background-color, #f0f2f6));
+            */
+        }}
+
+        /* Adjust the main content area's top padding to prevent overlap */
+        /* The main content is usually within a <section class="main"> */
+        section.main {{
+            padding-top: {MAIN_CONTENT_PADDING_TOP_REM}rem !important;
+        }}
+
+        /* You might also need to target a more specific block if the above isn't enough,
+           or if Streamlit's structure changes. For example: */
+        /*
+        .main .block-container {{
+            padding-top: {HEADER_HEIGHT_REM}rem !important;
+        }}
+        */
+    </style>
+    """,
+    unsafe_allow_html=True,
+)
+
+# --- Your App Content ---
+st.set_page_config(page_title="Sticky Built-in Header", layout="wide")
+
+st.sidebar.success("This is a sidebar.")
+st.sidebar.button("Sidebar Button")
+
+st.title("🎈 App with Sticky Built-in Header")
+
+st.header("Main Content Area")
+st.write(
+    "Scroll down to see Streamlit's own header (with the app title, status widget, "
+    "and hamburger menu/deploy button) remain fixed at the top of the page."
+)
+st.write(f"The header height is assumed to be around {HEADER_HEIGHT_REM}rem.")
+st.write(f"The main content's top padding is set to {MAIN_CONTENT_PADDING_TOP_REM}rem to avoid overlap.")
+
+st.info("Note: This relies on Streamlit's internal HTML structure (`data-testid='stHeader'`, `section.main`). Future Streamlit updates could potentially affect this.")
+
+if st.button("Show some data"):
+    st.dataframe({
+        'Column A': range(10),
+        'Column B': [i * 2 for i in range(10)],
+        'Column C': [str(i) * 3 for i in range(10)],
+    })
+
+for i in range(50):
+    st.write(f"Scrollable content line {i + 1}. The header should stay visible.")
+
+st.success("You've reached the end of the scrollable content!")
+
+
+
+
 
 #hide_streamlit_style = """
 #        <style>