Footer floats when page content is shorter than viewport
Opened by keeb · 4/17/2026· Shipped 4/21/2026
Description
The footer is floating again — appearing detached from the bottom of the page on routes where content is shorter than the viewport height. The footer should sit at the natural end of the page content and only be pushed to the viewport bottom when the page requires it (i.e. when content would otherwise leave an empty area below).
Current behavior looks like a regression of a previously-fixed issue.
Steps to Reproduce
- Run `deno task dev`
- Navigate to a page with short content (e.g. a profile, an empty feed, a utility page with a nav)
- Observe the footer floating detached from the bottom of the content on short pages, or floating away from the viewport bottom on long pages
Likely Location
`routes/_layout.tsx:29,38,46` — the layout uses `min-h-screen flex flex-col` with `<main class="flex-1 min-h-0">` and the footer inside the same flex column. The `min-h-0` on main combined with `flex-1` may be causing the footer to not anchor as intended.
Expected Behavior
Footer anchors to the bottom of the viewport when page content is shorter than the viewport, and to the bottom of the content otherwise — without visible 'floating' gaps.
Environment
- Branch: main
- Local dev via `deno task dev`
Shipped
Click a lifecycle step above to view its details.
stack72 commented 4/21/2026, 2:30:56 AM
Closing as cannot reproduce.
Instrumented this against the live dev stack with Chrome headless + CDP getBoundingClientRect() probes. Measured footer position on /leaderboard, /manual, /extensions, /u/, and /lab at viewports from 375×812 up to 1280×5000, with min-h-0 both present (current layout) and removed.
Findings:
- Long content (content > viewport): footer anchors at main.scrollHeight end, 0px gap. User scrolls to reach it. Working as designed.
- Short content (viewport > content): main grows via flex-1 to fill the column, footer pins to viewport bottom. The visible "gap" between the content end and the footer is the empty space inside main — that is the defining behavior of a flex sticky-footer, not a bug.
- min-h-0 has no observable effect in either scenario — identical getBoundingClientRect() values with and without it. The suspected mechanism in the issue description (min-h-0 letting main shrink below content) does not manifest here.
If the floating you observed was on a specific page or viewport I didn't test, please re-open with a screenshot + URL + viewport dimensions and I'll take another pass. If it was just the sticky-footer empty space on a short page looking wrong, that's a design question rather than a bug — happy to discuss changing the pattern (e.g. footer always at content end instead of sticky) under a separate issue.
Sign in to post a ripple.