Update app.py

app.py

@@ -36,38 +36,36 @@ BOLD_FONT = "Arial Black, Arial, sans-serif"  # used for bold axis titles & tick
 # =========================
 st.set_page_config(page_title="ST_GeoMech_UCS", page_icon="logo.png", layout="wide")
 
-# This is the new CSS block for the sticky header and message box
+# General CSS (logo helpers etc.)
 st.markdown("""
 <style>
-/* CSS to make the header sticky */
-.fixed-header-container {
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-    background-color: #f0f2f6; /* Adjust to match your app's background color */
-    padding: 10px 0;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-/* CSS to ensure main content doesn't get hidden under the sticky header */
-.main .block-container {
-    padding-top: 250px; /* Adjust this value to match the height of your sticky header */
-}
-
-/* General CSS */
-.brand-logo { width: 16px; height: auto; object-fit: contain; }
-.sidebar-header { display:flex; align-items:center; gap:12px; }
-.sidebar-header .text h1 { font-size: 1.05rem; margin:0; line-height:1.1; }
-.sidebar-header .text .tag { font-size: .85rem; color:#6b7280; margin:2px 0 0; }
-.centered-container {
+  .brand-logo { width: 16px; height: auto; object-fit: contain; }
+  .sidebar-header { display:flex; align-items:center; gap:12px; }
+  .sidebar-header .text h1 { font-size: 1.05rem; margin:0; line-height:1.1; }
+  .sidebar-header .text .tag { font-size: .85rem; color:#6b7280; margin:2px 0 0; }
+  .centered-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
-}
+  }
 </style>
 """, unsafe_allow_html=True)
 
+# CSS to make sticky headers work correctly by overriding Streamlit's overflow property
+st.markdown("""
+<style>
+/* This targets the main content area */
+.main .block-container {
+    overflow: unset !important;
+}
+
+/* This targets the vertical block that holds all your elements */
+div[data-testid="stVerticalBlock"] {
+    overflow: unset !important;
+}
+</style>
+""", unsafe_allow_html=True)
 
 # Hide uploader helper text ("Drag and drop file here", limits, etc.)
 st.markdown("""
@@ -135,7 +133,7 @@ def add_password_gate() -> None:
 
     st.sidebar.markdown(f"""
         <div class="centered-container">
-            <img src="{inline_logo('logo.png')}" style="width: 200px; height: auto; object-fit: contain;">
+            <img src="{inline_logo('logo.png')}" style="width: 100px; height: auto; object-fit: contain;">
             <div style='font-weight:800;font-size:1.2rem; margin-top: 10px;'>ST_GeoMech_UCS</div>
             <div style='color:#667085;'>Smart Thinking • Secure Access</div>
         </div>
@@ -198,9 +196,9 @@ def df_centered_rounded(df: pd.DataFrame, hide_index=True):
     numcols = out.select_dtypes(include=[np.number]).columns
     styler = (
         out.style
-            .format({c: "{:.2f}" for c in numcols})
-            .set_properties(**{"text-align": "center"})
-            .set_table_styles(TABLE_CENTER_CSS)
+           .format({c: "{:.2f}" for c in numcols})
+           .set_properties(**{"text-align": "center"})
+           .set_table_styles(TABLE_CENTER_CSS)
     )
     st.dataframe(styler, use_container_width=True, hide_index=hide_index)
 
@@ -426,7 +424,7 @@ st.session_state.setdefault("dev_preview",False)
 # =========================
 st.sidebar.markdown(f"""
     <div class="centered-container">
-        <img src="{inline_logo('logo.png')}" style="width: 200px; height: auto; object-fit: contain;">
+        <img src="{inline_logo('logo.png')}" style="width: 100px; height: auto; object-fit: contain;">
         <div style='font-weight:800;font-size:1.2rem;'>ST_GeoMech_UCS</div>
         <div style='color:#667085;'>Real-Time UCS Tracking While Drilling</div>
     </div>
@@ -435,36 +433,28 @@ st.sidebar.markdown(f"""
 
 # =========================
 # Reusable Sticky Header Function
-# This function is now removed, replaced by the fixed-header-container
-# =========================
-
-# =========================
-# The main sticky container is defined here, before the app logic
-# This ensures it's rendered at the top of the page regardless of state.
 # =========================
-with st.container():
-    st.markdown("<div class='fixed-header-container'>", unsafe_allow_html=True)
-    
-    # Conditional rendering for the headers and messages
-    if st.session_state.app_step == "dev":
-        st.header("Case Building")
-        if st.session_state.dev_file_loaded and st.session_state.dev_preview:
-            st.info("Previewed ✓ — now click **Run Model**.")
-        elif st.session_state.dev_file_loaded:
-            st.info("📄 Preview uploaded data using the sidebar button, then click **Run Model**.")
-        else:
-            st.info("Upload your data to build a case, then run the model to review development performance.")
-        
-    elif st.session_state.app_step == "validate":
-        st.header("Validate the Model")
-        st.info("Upload a dataset with the same **features** and **UCS** to evaluate performance.")
-        
-    elif st.session_state.app_step == "predict":
-        st.header("Prediction")
-        st.info("Upload a dataset with the feature columns (no **UCS**).")
-        
-    st.markdown("</div>", unsafe_allow_html=True)
-
+def sticky_header(title, message):
+    st.markdown(
+        f"""
+        <style>
+        .sticky-container {{
+            position: sticky;
+            top: 0;
+            background-color: white;
+            z-index: 100;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #eee;
+        }}
+        </style>
+        <div class="sticky-container">
+            <h3>{title}</h3>
+            <p>{message}</p>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
 
 # =========================
 # INTRO
@@ -506,6 +496,14 @@ if st.session_state.app_step == "dev":
     if st.sidebar.button("Proceed to Validation ▶", use_container_width=True): st.session_state.app_step="validate"; st.rerun()
     if st.sidebar.button("Proceed to Prediction ▶", use_container_width=True): st.session_state.app_step="predict"; st.rerun()
 
+    # Apply sticky header
+    if st.session_state.dev_file_loaded and st.session_state.dev_preview:
+        sticky_header("Case Building", "Previewed ✓ — now click **Run Model**.")
+    elif st.session_state.dev_file_loaded:
+        sticky_header("Case Building", "📄 **Preview uploaded data** using the sidebar button, then click **Run Model**.")
+    else:
+        sticky_header("Case Building", "**Upload your data to build a case, then run the model to review development performance.**")
+
     if run and st.session_state.dev_file_bytes:
         book = read_book_bytes(st.session_state.dev_file_bytes)
         sh_train = find_sheet(book, ["Train","Training","training2","train","training"])
@@ -573,6 +571,8 @@ if st.session_state.app_step == "validate":
     if st.sidebar.button("⬅ Back to Case Building", use_container_width=True): st.session_state.app_step="dev"; st.rerun()
     if st.sidebar.button("Proceed to Prediction ▶", use_container_width=True): st.session_state.app_step="predict"; st.rerun()
 
+    sticky_header("Validate the Model", "Upload a dataset with the same **features** and **UCS** to evaluate performance.")
+
     if go_btn and up is not None:
         book = read_book_bytes(up.getvalue())
         name = find_sheet(book, ["Validation","Validate","validation2","Val","val"]) or list(book.keys())[0]
@@ -638,6 +638,8 @@ if st.session_state.app_step == "predict":
     go_btn = st.sidebar.button("Predict", type="primary", use_container_width=True)
     if st.sidebar.button("⬅ Back to Case Building", use_container_width=True): st.session_state.app_step="dev"; st.rerun()
 
+    sticky_header("Prediction", "Upload a dataset with the feature columns (no **UCS**).")
+
     if go_btn and up is not None:
         book = read_book_bytes(up.getvalue()); name = list(book.keys())[0]
         df = book[name].copy()
@@ -666,11 +668,11 @@ if st.session_state.app_step == "predict":
             table = pd.DataFrame({
                 "Metric": ["# points","Pred min","Pred max","Pred mean","Pred std","OOR %"],
                 "Value":  [sv["n"],
-                           round(sv["pred_min"],2),
-                           round(sv["pred_max"],2),
-                           round(sv["pred_mean"],2),
-                           round(sv["pred_std"],2),
-                           f'{sv["oor"]:.1f}%']
+                            round(sv["pred_min"],2),
+                            round(sv["pred_max"],2),
+                            round(sv["pred_mean"],2),
+                            round(sv["pred_std"],2),
+                            f'{sv["oor"]:.1f}%']
             })
             st.success("Predictions ready ✓")
             df_centered_rounded(table, hide_index=True)