fix(footer): stretch block container to full viewport to close white gap

Option 1 (tightening ``padding-bottom`` from 3rem to 2rem) did not
eliminate the gap. The remaining gap is ``.stApp``'s solid white
background showing through the area below the block container's
natural (content-sized) bottom edge — visible because the home
page's content is shorter than the viewport.

Stretch the block container with ``min-height: calc(100vh / 0.85)``
so the container itself fills the visible viewport. Now the area
between the last finding card and the fixed footer is the block
container's own background, not ``.stApp`` showing through —
visually continuous with the content above.

The ``/0.85`` compensates for ``.stApp { zoom: 0.85 }`` (defined in
``_HIDE_CHROME_CSS``): inside a zoomed container, ``100vh`` renders
at 85% of true viewport height, leaving a 15% gap if used raw.
``box-sizing: border-box`` keeps the 2rem padding part of the
total height instead of stacking onto it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-18 22:30:22 +00:00
parent d487a44170
commit 04dc326020

View File

@@ -629,12 +629,20 @@ def render_sticky_footer() -> None:
"""
<style>
[data-testid="stAppViewBlockContainer"] {
/* Reserve just enough room for the fixed footer overlay (min-height
32px + 0.25rem * 2 padding ≈ 2rem). Anything larger leaves a
visible white gap above the footer that the user sees as a
"white bar" between content and the Help/Close row — actually
just ``.stApp``'s solid-white background showing through. */
/* Reserve room for the fixed footer overlay (footer min-height
32px + 0.25rem * 2 padding ≈ 2rem). */
padding-bottom: 2rem !important;
/* Stretch the container to at least viewport height so its own
background fills the area between the last piece of content
and the fixed footer overlay — otherwise ``.stApp``'s solid
white background shows through that gap and reads as a
horizontal "white bar". ``.stApp`` carries ``zoom: 0.85`` so
100vh in this layout renders at 85% visually; divide by 0.85
to span the full visible viewport. The footer itself is fixed
and lives outside ``.stApp`` (mounted on ``<body>``), so it's
not affected by the zoom and overlays normally. */
min-height: calc(100vh / 0.85) !important;
box-sizing: border-box !important;
}
#datatools-sticky-footer {
position: fixed !important;