giteadmin/datatools-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(gui): stop overstretching pages, restore footer clearance

Browse Source 
Two layout bugs were hiding the bottom of every tool page behind the
sticky footer:

1. ``.stApp`` and the main/sidebar containers were forced to
   ``min-height: calc(100vh / 0.85)``, ≈ 17.6% taller than the
   viewport, to mask a white bar caused by the ``zoom: 0.85`` scaler.
   That hack stretches short pages and pushes long-page content past
   the visible area. Drop the calc factor — plain ``100vh`` fills the
   visible viewport without forced overflow.

2. ``render_sticky_footer``'s stylesheet re-set the block container's
   ``padding-bottom`` to ``2rem``, overriding the ``7rem`` reserved
   by ``hide_streamlit_chrome``. The footer (~40px tall) needs more
   than 32px of clearance, so the last row of content was sliding
   behind the footer. Remove the override and let chrome's reservation
   stand.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael
2026-05-20 23:03:52 +00:00
parent d090f8cb5e
commit 3a3a9a895b
1 changed files with 15 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/gui/components/_legacy.py
View File

@@ -1704,29 +1704,26 @@ def render_sticky_footer() -> None:
st.markdown( st.markdown(
""" """
<style> <style>
/* ``.stApp`` carries ``zoom: 0.85`` (compact-layout scaler) so any /* ``.stApp`` carries ``zoom: 0.85`` (compact-layout scaler). We used to
child sized at ``100vh`` only renders at 85vh visually — the bottom stretch ``.stApp`` to ``100vh / 0.85`` to hide a small white bar
~15% of the viewport is OUTSIDE ``.stApp`` and shows ``body``'s below it, but that forced every page to be ~17.6% taller than the
white through, producing a horizontal "white bar" across the full viewport — short pages got artificially stretched and the last row
width above the fixed footer. Compensate by stretching ``.stApp`` of tall pages slid behind the fixed footer. Now we let containers
and the layout containers to ``100vh / 0.85`` so they fill the size naturally: ``100vh`` is enough to fill the visible area, and
visible viewport. Streamlit renamed the block-container testid in the page-level ``padding-bottom`` set by ``hide_streamlit_chrome``
the current release — match both the new ``stMainBlockContainer`` reserves clear space above the footer. */
and the legacy ``stAppViewBlockContainer`` so the rule keeps
working if/when the framework rolls back. */
.stApp { .stApp {
min-height: calc(100vh / 0.85) !important; min-height: 100vh !important;
} }
[data-testid="stSidebar"], [data-testid="stSidebar"],
[data-testid="stMain"] { [data-testid="stMain"] {
min-height: calc(100vh / 0.85) !important; min-height: 100vh !important;
}
[data-testid="stMainBlockContainer"],
[data-testid="stAppViewBlockContainer"] {
/* Reserve room for the fixed footer overlay (footer min-height
32px + 0.25rem * 2 padding ≈ 2rem). */
padding-bottom: 2rem !important;
} }
/* DO NOT override ``padding-bottom`` on the block container here — the
``hide_streamlit_chrome`` rule above sets it to 7rem precisely so
content clears this footer cleanly. A tighter override here was
previously winning the cascade (loaded later) and cutting off the
last line of tool-page content. */
#datatools-sticky-footer { #datatools-sticky-footer {
position: fixed !important; position: fixed !important;
bottom: 0 !important; bottom: 0 !important;