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:
@@ -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>
|
||||||
"""
|
"""
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user