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