Keep the footer on the fold when a page does not fill the screen#5
Merged
Merged
Conversation
Scroll to the bottom of a long page, click a top-level sidebar group, and the second click lands you on a section landing page. Those pages are short -- a lede and a few cards -- and the footer was left floating wherever the content happened to stop, with the rail carrying on below it to the bottom of the screen. Measured on tools.html: footer bottom at 571, rail bottom at 913. That is 342px of rail under a detached footer. Nothing in this stylesheet had ever set a minimum height, so a short page has always ended early. It was invisible while the sidebar was sticky, because the rail ended with the content and the two stopped together. Making the rail fixed so it would stop locking at page bottom is what exposed it. Body is now a flex column with a minimum of one viewport, and .layout takes the slack, so the footer is pushed down to the fold on a short page and behaves normally on a long one. The sticky topbar stays the first row; everything fixed -- the rail, the scrim, the modals, the back-to-top -- is out of flow and unaffected. Checked after: short pages report gapBelowFooter=0 with the footer bottom, the rail bottom and the viewport all at the same pixel. Long pages are unchanged. At 1500px the footer starts at 268 where the rail ends; at 900px the drawer is off-canvas and the footer runs full width. The page-bottom scroll fix still holds, with the rail at 58 and its first group at 87.
📝 WalkthroughWalkthroughThe page body now uses a vertical flex layout with a minimum dynamic viewport height, while the main layout expands to consume remaining space and keep the footer anchored on short pages. ChangesFooter anchoring layout
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/assets/site.css`:
- Around line 37-44: Update the explanatory comment above the column flex layout
to state that sticky elements remain in normal flow, while only fixed elements
are removed from flow; preserve the surrounding explanation of the footer and
topbar behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
Comment on lines
+37
to
+44
| /* Column flex so the footer is pushed to the bottom of the viewport on a | ||
| page whose content does not fill it. Nothing here set a minimum height | ||
| before, so a short page left the footer floating wherever the prose | ||
| happened to stop — invisible while the rail was sticky and ended with the | ||
| content, obvious once it became fixed and ran to the bottom of the screen | ||
| regardless. The short section landing pages are where it shows most. | ||
| The fixed and sticky children sit outside this flow, except .topbar, which | ||
| is sticky and is meant to be the first row. */ |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Correct the sticky-positioning explanation.
position: sticky elements remain in normal flow; only fixed-position elements are removed from flow. Please update this comment so it does not misdescribe the behavior this layout relies on.
Suggested wording
- The fixed and sticky children sit outside this flow, except .topbar, which
- is sticky and is meant to be the first row. */
+ Fixed children sit outside this flow; sticky children remain in flow, with
+ .topbar intentionally occupying the first row. */📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| /* Column flex so the footer is pushed to the bottom of the viewport on a | |
| page whose content does not fill it. Nothing here set a minimum height | |
| before, so a short page left the footer floating wherever the prose | |
| happened to stop — invisible while the rail was sticky and ended with the | |
| content, obvious once it became fixed and ran to the bottom of the screen | |
| regardless. The short section landing pages are where it shows most. | |
| The fixed and sticky children sit outside this flow, except .topbar, which | |
| is sticky and is meant to be the first row. */ | |
| /* Column flex so the footer is pushed to the bottom of the viewport on a | |
| page whose content does not fill it. Nothing here set a minimum height | |
| before, so a short page left the footer floating wherever the prose | |
| happened to stop — invisible while the rail was sticky and ended with the | |
| content, obvious once it became fixed and ran to the bottom of the screen | |
| regardless. The short section landing pages are where it shows most. | |
| Fixed children sit outside this flow; sticky children remain in flow, with | |
| .topbar intentionally occupying the first row. */ |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@web/assets/site.css` around lines 37 - 44, Update the explanatory comment
above the column flex layout to state that sticky elements remain in normal
flow, while only fixed elements are removed from flow; preserve the surrounding
explanation of the footer and topbar behavior.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The bug
Scroll to the bottom of a long page, click a top-level sidebar group. The second click lands on a section landing page, those pages are short — a lede and a few cards — and the footer was left floating wherever the content stopped, with the rail carrying on below it to the bottom of the screen.
Measured on
tools.htmlbefore the fix:342px of rail under a detached footer.
Why it was there
Nothing in
site.csshad ever set a minimum height, so a short page has always ended early. It was invisible while the sidebar wasposition: sticky, because the rail ended with.layoutand the two stopped together. Making the railfixed— which is what stopped it locking at page bottom — is what exposed it.So this is the third change in a chain, and worth reading as one: sticky rail locked at page bottom → made it fixed → fixed rail ran under the footer → gave the footer a left margin → fixed rail ran below the footer on short pages → this.
The fix
bodyis a flex column withmin-height: 100dvh, and.layouttakes the slack. The footer is pushed to the fold on a short page and behaves normally on a long one.The sticky topbar stays the first row. Everything fixed — the rail, the scrim, the search modal, the lightbox, back-to-top — is out of flow and unaffected.
Verification
tools.html,run-a-portfolio.html(short)gapBelowFooter=0— footer bottom, rail bottom and viewport all at 913index.html,what-things-are.html(long)footerLeft=268,railRight=268— no overlapnode web/build.mjsclean: 61 pages, 19 prompts, 10 worksheets, 69 search entries.Generated by Claude Code
Summary by CodeRabbit