From 4685bb42892c48381a82780c2c843d54ba449a83 Mon Sep 17 00:00:00 2001
From: Michael <michael.dombaugh@gmail.com>
Date: Sun, 17 May 2026 00:28:58 +0000
Subject: [PATCH] =?UTF-8?q?style(chrome):=20tighter=20vertical=20rhythm=20?=
 =?UTF-8?q?=E2=80=94=20less=20whitespace=20across=20screens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reported: too much whitespace between widgets, dividers, and headings.

Compact-spacing CSS layer added to ``_HIDE_CHROME_CSS`` (so it applies
on every page that calls ``hide_streamlit_chrome``):

- ``[data-testid="stVerticalBlock"]`` and ``stHorizontalBlock`` gap
  trimmed from Streamlit's default ~1rem to 0.5rem.
- Heading margins (h1-h4) tightened — h1/h2/h3 used to leave 1-1.5rem
  above; now 0.25-0.5rem.
- ``hr`` (``st.divider()``) drops from 1rem above+below to 0.4rem.
- Markdown paragraphs and captions: 0.25rem bottom margin instead of
  the default 1rem.
- Expander summary padding reduced (0.35rem top/bottom).
- File-uploader, button, and metric tiles: trimmed internal padding.

Also slimmed the main-container padding from 1rem top / Streamlit
default bottom (~6rem) to 0.5rem top / 0.75rem bottom.

The existing ``zoom: 0.85`` on ``.stApp`` is kept — the user wanted
*less white space*, not *smaller content*, and dropping zoom would
shrink type alongside everything else.

2220 tests pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/gui/components/_legacy.py | 69 ++++++++++++++++++++++++++++++++++-
 1 file changed, 67 insertions(+), 2 deletions(-)

diff --git a/src/gui/components/_legacy.py b/src/gui/components/_legacy.py
index bee8daf..d5ddc3a 100644
--- a/src/gui/components/_legacy.py
+++ b/src/gui/components/_legacy.py
@@ -60,15 +60,80 @@ header[data-testid="stHeader"] {
 footer {
     display: none !important;
 }
-/* Reclaim top padding lost from hidden header */
+/* Reclaim top padding lost from hidden header. Slim the bottom too —
+   Streamlit's default leaves several rems below the last widget. */
 .stAppViewBlockContainer,
 [data-testid="stAppViewBlockContainer"] {
-    padding-top: 1rem !important;
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.75rem !important;
 }
 /* Scale content to fit app window */
 .stApp {
     zoom: 0.85;
 }
+
+/* ---------- Compact-spacing layer ---------- */
+/* Streamlit ships generous vertical rhythm (~1rem gap between every
+   block, 1.5rem+ above each heading, 1rem on dividers). For a desktop
+   data app that's a lot of empty space. Tighten the gaps without
+   making the layout look cramped. */
+
+/* Gap between stacked elements inside a vertical block (the default
+   container around most page content). */
+[data-testid="stVerticalBlock"] {
+    gap: 0.5rem !important;
+}
+[data-testid="stHorizontalBlock"] {
+    gap: 0.5rem !important;
+}
+
+/* Headings — tighter top space + a hair less below. */
+.stApp h1 { margin-top: 0.25rem !important; margin-bottom: 0.5rem !important; }
+.stApp h2 { margin-top: 0.5rem  !important; margin-bottom: 0.4rem !important; }
+.stApp h3 { margin-top: 0.4rem  !important; margin-bottom: 0.3rem !important; }
+.stApp h4 { margin-top: 0.3rem  !important; margin-bottom: 0.25rem !important; }
+
+/* st.divider() — Streamlit's default hr has 1rem above and below. */
+[data-testid="stMarkdownContainer"] hr,
+hr {
+    margin-top: 0.4rem !important;
+    margin-bottom: 0.4rem !important;
+}
+
+/* Markdown paragraphs — slim trailing space. */
+[data-testid="stMarkdownContainer"] p {
+    margin-bottom: 0.25rem;
+}
+
+/* Captions — slim trailing space. */
+[data-testid="stCaption"],
+[data-testid="stCaptionContainer"] {
+    margin-bottom: 0.25rem;
+}
+
+/* Expander header padding — Streamlit's default is roomy. */
+[data-testid="stExpander"] details > summary {
+    padding-top: 0.35rem;
+    padding-bottom: 0.35rem;
+}
+
+/* Button row inside columns — tighter top space. */
+[data-testid="stButton"],
+[data-testid="stDownloadButton"] {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+/* File-uploader internal spacing. */
+[data-testid="stFileUploader"] {
+    margin-bottom: 0.25rem;
+}
+
+/* Metric tiles — Streamlit pads them generously inside a row. */
+[data-testid="stMetric"] {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
 </style>
 """