Update app.py

app.py

@@ -1,58 +1,46 @@
 import streamlit as st 
 
 # Set page config
-st.set_page_config(page_title="JavaScript Status Widget Fix", layout="wide")
-
-# JavaScript approach to fix the status widget position
-js_code = """
-<script>
-// Function to fix the position of the status widget
-function fixStatusWidget() {
-    // Try to find the status widget using different possible selectors
-    const statusWidget = 
-        document.querySelector('[data-testid="stStatusWidget"]') || 
-        document.querySelector('.stStatusWidget') ||
-        document.querySelector('button[kind="formSubmit"]').closest('div').closest('div');
+st.set_page_config(page_title="Fixed Top Toolbar", layout="wide")
+
+# CSS to fix the entire top toolbar
+st.markdown("""
+<style>
+    /* Target the entire header/toolbar section */
+    header[data-testid="stHeader"],
+    header.css-18ni7ap.e8zbici2,
+    .stApp > header {
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        height: auto !important;
+        z-index: 999999 !important;
+        background-color: white !important;
+        box-shadow: 0 1px 5px rgba(0,0,0,0.1) !important;
+    }
     
-    if (statusWidget) {
-        // Set fixed positioning
-        statusWidget.style.position = 'fixed';
-        statusWidget.style.top = '10px';
-        statusWidget.style.right = '10px';
-        statusWidget.style.zIndex = '1000000';
-        statusWidget.style.backgroundColor = 'white';
-        statusWidget.style.borderRadius = '4px';
-        statusWidget.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
-        statusWidget.style.padding = '4px';
-        console.log('Status widget positioned successfully');
-    } else {
-        console.log('Status widget not found, will retry');
+    /* Add padding to main content to prevent it being hidden under fixed header */
+    .main .block-container {
+        padding-top: 3rem !important;
     }
-}
-
-// Try to fix the widget immediately
-fixStatusWidget();
-
-// Also run after a delay to make sure the DOM is fully loaded
-setTimeout(fixStatusWidget, 1000);
-
-// Continue checking periodically in case the widget gets recreated
-setInterval(fixStatusWidget, 2000);
-</script>
-"""
-
-# Inject the JavaScript
-st.components.v1.html(js_code, height=0)
+    
+    /* Make sure status widget appears above other elements */
+    [data-testid="stStatusWidget"] {
+        z-index: 1000000 !important;
+    }
+</style>
+""", unsafe_allow_html=True)
 
 # Your regular Streamlit app content
-st.title("App with JavaScript-Fixed Status Widget")
-st.write("Scroll down to see if the status widget stays fixed")
+st.title("App with Fixed Top Toolbar")
+st.write("Scroll down to test if the toolbar and status widget stay fixed")
 
-# Generate content for scrolling test
+# Generate content for scrolling
 for i in range(30):
     st.write(f"Testing content line {i}")
-    if i % 10 == 0:
-        st.markdown("### Section Break")
+    if i % 5 == 0:
+        st.markdown("---")
 
 # --- SHARED ON ALL PAGES ---
 st.logo(image="images/menu_book_60dp_75FBFD.png")