From 05b7005a414465f7abc55d149b2272854325875d Mon Sep 17 00:00:00 2001
From: Tyler <tyler@tylerhoang.xyz>
Date: Sat, 16 May 2026 00:24:15 -0700
Subject: Move Top Movers to sidebar and tighten top spacing

---
 app.py                   |  12 ++---
 components/top_movers.py | 112 +++++++++++++++++++++++++++++++++--------------
 2 files changed, 83 insertions(+), 41 deletions(-)

diff --git a/app.py b/app.py
index bff6209..51f30dd 100644
--- a/app.py
+++ b/app.py
@@ -216,7 +216,7 @@ button[kind="secondary"]:hover {
 
 /* ── Main content area ──────────────────────────────────────────────────── */
 .block-container {
-  padding-top: 1.25rem !important;
+  padding-top: 1.75rem !important;
   padding-bottom: 3rem !important;
 }
 
@@ -648,6 +648,9 @@ with st.sidebar:
         elif ticker:
             st.caption(f"Viewing: **{ticker}**")
 
+    st.divider()
+    render_top_movers(compact=True)
+
 
 # ── Market Bar ────────────────────────────────────────────────────────────────
 
@@ -656,13 +659,6 @@ with st.container():
 
 st.divider()
 
-# ── Top Movers ────────────────────────────────────────────────────────────────
-
-with st.container():
-    render_top_movers()
-
-st.divider()
-
 # ── Main Content ──────────────────────────────────────────────────────────────
 
 if not ticker:
diff --git a/components/top_movers.py b/components/top_movers.py
index d50eee7..fcf64d4 100644
--- a/components/top_movers.py
+++ b/components/top_movers.py
@@ -12,65 +12,87 @@ def _toggle_mover_tab(state_key: str):
     st.session_state[state_key] = not st.session_state.get(state_key, False)
 
 
-def _inject_styles():
+def _inject_styles(compact: bool = False):
+    row_template = (
+        "minmax(60px, 0.95fr) minmax(0, 2.0fr) minmax(74px, 1fr) minmax(86px, 1fr)"
+        if compact
+        else "minmax(72px, 0.8fr) minmax(0, 2.6fr) minmax(90px, 1fr) minmax(110px, 1.1fr)"
+    )
+    row_gap = "0.45rem" if compact else "0.85rem"
+    row_padding = "0.12rem 0" if compact else "0.18rem 0"
+    symbol_size = "0.75rem" if compact else "0.875rem"
+    name_size = "0.75rem" if compact else "0.8125rem"
+    price_size = "0.75rem" if compact else "0.8125rem"
+    change_size = "0.75rem" if compact else "0.8125rem"
+    change_meta_size = "10px" if compact else "11px"
+
     st.markdown(
         """
         <style>
-          .prism-mover-list {
+          .prism-mover-list {{
             display: grid;
             gap: 0.12rem;
-          }
-          .prism-mover-row {
+          }}
+          .prism-mover-row {{
             display: grid;
-            grid-template-columns: minmax(72px, 0.8fr) minmax(0, 2.6fr) minmax(90px, 1fr) minmax(110px, 1.1fr);
-            gap: 0.85rem;
+            grid-template-columns: {row_template};
+            gap: {row_gap};
             align-items: center;
-            padding: 0.18rem 0;
-          }
-          .prism-mover-symbol {
+            padding: {row_padding};
+          }}
+          .prism-mover-symbol {{
             font-family: 'IBM Plex Sans', sans-serif;
-            font-size: 0.875rem;
+            font-size: {symbol_size};
             font-weight: 600;
             color: #F2ECDC;
             line-height: 1.1;
-          }
-          .prism-mover-name {
+          }}
+          .prism-mover-name {{
             font-family: 'IBM Plex Sans', sans-serif;
             color: #8E8676;
-            font-size: 0.8125rem;
+            font-size: {name_size};
             line-height: 1.15;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-          }
-          .prism-mover-price {
+          }}
+          .prism-mover-price {{
             font-family: 'IBM Plex Mono', monospace;
             font-variant-numeric: tabular-nums;
-            font-size: 0.8125rem;
+            font-size: {price_size};
             color: #C7C0AE;
             line-height: 1.1;
-          }
-          .prism-mover-change {
+          }}
+          .prism-mover-change {{
             font-family: 'IBM Plex Mono', monospace;
             font-variant-numeric: tabular-nums;
-            font-size: 0.8125rem;
+            font-size: {change_size};
             font-weight: 500;
             line-height: 1.1;
-          }
-          .prism-mover-change-meta {
+          }}
+          .prism-mover-change-meta {{
             font-family: 'IBM Plex Mono', monospace;
-            font-size: 11px;
+            font-size: {change_meta_size};
             color: #5E5849;
             margin-left: 0.2rem;
-          }
-          @media (max-width: 900px) {
-            .prism-mover-row {
+          }}
+          @media (max-width: 900px) {{
+            .prism-mover-row {{
               grid-template-columns: minmax(68px, 0.9fr) minmax(0, 2.2fr) minmax(82px, 1fr) minmax(96px, 1fr);
               gap: 0.55rem;
-            }
-          }
+            }}
+          }}
         </style>
-        """,
+        """.format(
+            row_template=row_template,
+            row_gap=row_gap,
+            row_padding=row_padding,
+            symbol_size=symbol_size,
+            name_size=name_size,
+            price_size=price_size,
+            change_size=change_size,
+            change_meta_size=change_meta_size,
+        ),
         unsafe_allow_html=True,
     )
 
@@ -150,8 +172,8 @@ def _render_mover_tab(screen: str, state_key: str):
 
 
 @st.fragment
-def render_top_movers():
-    _inject_styles()
+def render_top_movers(compact: bool = False):
+    _inject_styles(compact=compact)
     st.markdown("""
     <div style="
       font-family:'IBM Plex Sans',sans-serif;
@@ -170,10 +192,34 @@ def render_top_movers():
     }
 
     with tab_gainers:
-        _render_mover_tab(screens["gainers"], "top_movers_gainers_expanded")
+        if compact:
+            quotes = _fetch_movers(screens["gainers"])
+            if not quotes:
+                st.caption("No data available.")
+            else:
+                rows_html = "".join(_mover_row_html(q) for q in quotes[:DEFAULT_VISIBLE_MOVERS])
+                st.markdown(f"<div class='prism-mover-list'>{rows_html}</div>", unsafe_allow_html=True)
+        else:
+            _render_mover_tab(screens["gainers"], "top_movers_gainers_expanded")
 
     with tab_losers:
-        _render_mover_tab(screens["losers"], "top_movers_losers_expanded")
+        if compact:
+            quotes = _fetch_movers(screens["losers"])
+            if not quotes:
+                st.caption("No data available.")
+            else:
+                rows_html = "".join(_mover_row_html(q) for q in quotes[:DEFAULT_VISIBLE_MOVERS])
+                st.markdown(f"<div class='prism-mover-list'>{rows_html}</div>", unsafe_allow_html=True)
+        else:
+            _render_mover_tab(screens["losers"], "top_movers_losers_expanded")
 
     with tab_active:
-        _render_mover_tab(screens["active"], "top_movers_active_expanded")
+        if compact:
+            quotes = _fetch_movers(screens["active"])
+            if not quotes:
+                st.caption("No data available.")
+            else:
+                rows_html = "".join(_mover_row_html(q) for q in quotes[:DEFAULT_VISIBLE_MOVERS])
+                st.markdown(f"<div class='prism-mover-list'>{rows_html}</div>", unsafe_allow_html=True)
+        else:
+            _render_mover_tab(screens["active"], "top_movers_active_expanded")
-- 
cgit v1.3-2-g0d8e