diag(footer): color-tag every candidate bottom-area container
Option 2 (stretching the block container with ``min-height``) did not close the white gap. Either the rule isn't applying, or the block container isn't the element that fills the visible bottom of the page. Tint every plausible container so the eye can tell us instantly which one paints the bar: - RED ``stAppViewBlockContainer`` (still has min-height applied) - BLUE ``stMain`` / ``section[stMain]`` (with its own min-height) - GREEN ``stAppViewContainer`` - GOLD ``.stApp`` (zoomed) User reload + report which color shows where the "white bar" previously was — that names the target. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -628,22 +628,27 @@ def render_sticky_footer() -> None:
|
|||||||
st.markdown(
|
st.markdown(
|
||||||
"""
|
"""
|
||||||
<style>
|
<style>
|
||||||
|
/* DIAGNOSTIC: tint every plausible bottom-area container so we can
|
||||||
|
see WHICH element is actually filling the visible bottom of the
|
||||||
|
page. Whichever color shows in the "white bar" region is the
|
||||||
|
element to fix. To be reverted once the right target is known. */
|
||||||
[data-testid="stAppViewBlockContainer"] {
|
[data-testid="stAppViewBlockContainer"] {
|
||||||
/* Reserve room for the fixed footer overlay (footer min-height
|
background: #ff5050 !important; /* RED = block container */
|
||||||
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;
|
min-height: calc(100vh / 0.85) !important;
|
||||||
|
padding-bottom: 2rem !important;
|
||||||
box-sizing: border-box !important;
|
box-sizing: border-box !important;
|
||||||
}
|
}
|
||||||
|
[data-testid="stMain"],
|
||||||
|
section[data-testid="stMain"] {
|
||||||
|
background: #50c0ff !important; /* BLUE = stMain */
|
||||||
|
min-height: 100vh !important;
|
||||||
|
}
|
||||||
|
[data-testid="stAppViewContainer"] {
|
||||||
|
background: #50ff80 !important; /* GREEN = view container */
|
||||||
|
}
|
||||||
|
.stApp {
|
||||||
|
background: #ffd000 !important; /* GOLD = .stApp (zoomed) */
|
||||||
|
}
|
||||||
#datatools-sticky-footer {
|
#datatools-sticky-footer {
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
bottom: 0 !important;
|
bottom: 0 !important;
|
||||||
|
|||||||
Reference in New Issue
Block a user