Upload streamlit_app.py

streamlit_app.py

@@ -67,6 +67,42 @@ st.markdown(
         color: #9aa4b2;
         font-size: 12px;
     }
+
+    /* ── Mobile-responsive overrides (phones / narrow tablets) ───────────
+       Streamlit's default st.columns() lays out equal-width children in a
+       flex row that never wraps. On a 380 px screen the 5 KPI tiles or the
+       2-column chart pairs become unreadably narrow. The rules below tell
+       any horizontal block to wrap, and force each child column to take
+       the full row width below 768 px. */
+    @media (max-width: 768px) {
+        div[data-testid="stHorizontalBlock"] {
+            flex-wrap: wrap !important;
+        }
+        div[data-testid="stHorizontalBlock"] > div[data-testid="column"] {
+            flex: 1 1 100% !important;
+            min-width: 100% !important;
+            width: 100% !important;
+        }
+        div[data-testid="stMetric"] {
+            padding: 12px 14px;
+        }
+        div[data-testid="stMetric"] [data-testid="stMetricValue"] {
+            font-size: 22px;
+        }
+        div[data-testid="stMetric"] [data-testid="stMetricLabel"] {
+            font-size: 11px;
+        }
+        /* Give Plotly charts a bit more vertical room since they now occupy
+           the full width — Plotly aspect ratio reads weird otherwise. */
+        div[data-testid="stPlotlyChart"] {
+            min-height: 300px;
+        }
+        /* Tighten the title so the KPI tiles are visible above the fold. */
+        h1 {
+            font-size: 24px !important;
+            margin-bottom: 4px !important;
+        }
+    }
 </style>
 """,
     unsafe_allow_html=True,