Update app.py

app.py

@@ -1,42 +1,59 @@
 import streamlit as st 
 
 # Set page config
-st.set_page_config(page_title="Fixed Status Widget Approach 2", layout="wide")
-
-# More specific CSS targeting just the status widget
-st.markdown("""
-<style>
-    /* Very specific targeting of the status widget */
-    div[data-testid="stStatusWidget"],
-    div:has(> div[data-testid="stStatusWidget"]) {
-        position: fixed !important;
-        top: 5px !important;
-        right: 5px !important;
-        z-index: 1000000 !important;
-        background-color: white !important;
-        border-radius: 4px !important;
-        box-shadow: 0 0 10px rgba(0,0,0,0.15) !important;
-    }
+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');
     
-    /* Ensure the status button stays visible */
-    button[kind="formSubmit"] {
-        visibility: visible !important;
-        display: inline-flex !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');
     }
-</style>
-""", unsafe_allow_html=True)
+}
+
+// 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)
 
 # Your regular Streamlit app content
-st.title("App with Fixed Status Widget")
-st.write("Scroll down to test if the status widget stays fixed")
+st.title("App with JavaScript-Fixed Status Widget")
+st.write("Scroll down to see if the status widget stays fixed")
 
-# Generate content for scrolling
+# Generate content for scrolling test
 for i in range(30):
     st.write(f"Testing content line {i}")
     if i % 10 == 0:
         st.markdown("### Section Break")
 
-
 # --- SHARED ON ALL PAGES ---
 st.logo(image="images/menu_book_60dp_75FBFD.png")
 st.sidebar.title("SBS V2.0 mapper")