Phase 2: sticky market bar via CSS position:sticky

Keys the market bar container (st-key-market_bar_sticky) so CSS can
target it reliably, then applies position:sticky top:0 z-index:200 with
the page background so content scrolling underneath is covered.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 11 insertions, 1 deletions

diff --git a/app.py b/app.py
index 219751f..073d629 100644
--- a/app.py
+++ b/app.py
@@ -220,6 +220,16 @@ button[kind="secondary"]:hover {
   padding-bottom: 3rem !important;
 }
 
+/* ── Sticky market bar ──────────────────────────────────────────────────── */
+.st-key-market_bar_sticky {
+  position: sticky !important;
+  top: 0 !important;
+  z-index: 200 !important;
+  background: var(--ink-0) !important;
+  padding-bottom: 0.5rem !important;
+  margin-bottom: -0.5rem !important;
+}
+
 /* ── Tabs ───────────────────────────────────────────────────────────────── */
 .stTabs [data-baseweb="tab-list"] {
   background: var(--ink-2) !important;
@@ -776,7 +786,7 @@ with st.sidebar:
 
 # ── Market Bar ────────────────────────────────────────────────────────────────
 
-with st.container():
+with st.container(key="market_bar_sticky"):
     render_market_bar()
 
 st.divider()