style(chrome): tighter vertical rhythm — less whitespace across screens

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>
This commit is contained in:
2026-05-17 00:28:58 +00:00
parent e96d5901f4
commit 4685bb4289

View File

@@ -60,15 +60,80 @@ header[data-testid="stHeader"] {
footer { footer {
display: none !important; 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, .stAppViewBlockContainer,
[data-testid="stAppViewBlockContainer"] { [data-testid="stAppViewBlockContainer"] {
padding-top: 1rem !important; padding-top: 0.5rem !important;
padding-bottom: 0.75rem !important;
} }
/* Scale content to fit app window */ /* Scale content to fit app window */
.stApp { .stApp {
zoom: 0.85; 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> </style>
""" """