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

fix(footer): hide the helper page_link row that was leaking into pages

Browse Source 
Same wrong-testid bug as the Close click handler: the CSS rule
that's supposed to position the hidden ``st.page_link`` off-screen
was selecting ``a[data-testid="stPageLink"]``, but the bare
``stPageLink`` testid is on the OUTER wrapper div — the anchor
uses ``stPageLink-NavLink``. ``:has(a[data-testid="stPageLink"]...)``
matched nothing, so the helper rendered as a full-size visible
row at the bottom of every page (the "large white bar blocking
content" the user reported).

Fix: switch both the ``:has()`` rule and the no-:has() fallback
to ``a[data-testid="stPageLink-NavLink"][href*="close"]``. The
``href*="close"`` form also works for base-path deployments
(``/myapp/close``), matching the click handler's selector.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael
2026-05-18 16:07:07 +00:00
parent add3b866ee
commit 24ee021314
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -734,9 +734,15 @@ def render_sticky_footer() -> None:
Streamlit's soft nav (preserves the websocket, no visible page Streamlit's soft nav (preserves the websocket, no visible page
reload) instead of the browser hard-nav an ``<a href="./close">`` reload) instead of the browser hard-nav an ``<a href="./close">``
would trigger. Off-screen (rather than ``display:none``) so would trigger. Off-screen (rather than ``display:none``) so
React event delegation works reliably across browsers. */ React event delegation works reliably across browsers.
[data-testid="stElementContainer"]:has(a[data-testid="stPageLink"][href$="/close"]),
[data-testid="stElementContainer"]:has(a[data-testid="stPageLink"][href$="/close/"]) { NOTE on the selector: Streamlit's page_link renders an outer
wrapper div with ``data-testid="stPageLink"`` and an inner anchor
with ``data-testid="stPageLink-NavLink"`` — the NavLink suffix
is required to match the anchor (the bare testid is on the
wrapper). ``href*="close"`` works across both root (``/close``)
and base-path (``/myapp/close``) deployments. */
[data-testid="stElementContainer"]:has(a[data-testid="stPageLink-NavLink"][href*="close"]) {
position: absolute !important; position: absolute !important;
left: -9999px !important; left: -9999px !important;
top: -9999px !important; top: -9999px !important;
@@ -747,9 +753,9 @@ def render_sticky_footer() -> None:
pointer-events: none !important; pointer-events: none !important;
} }
/* Defensive fallback for browsers without :has() — at least /* Defensive fallback for browsers without :has() — at least
shrink the inline page_link so it doesn't render a visible row. */ shrink the inline page_link so it doesn't render a visible row.
a[data-testid="stPageLink"][href$="/close"], Same testid note as above. */
a[data-testid="stPageLink"][href$="/close/"] { a[data-testid="stPageLink-NavLink"][href*="close"] {
visibility: hidden !important; visibility: hidden !important;
height: 0 !important; height: 0 !important;
padding: 0 !important; padding: 0 !important;