Fix sticky footer for pages with short content#382
Merged
Conversation
When page content is shorter than the viewport, the footer was floating in the middle of the page instead of staying at the bottom. Fix by: - Add flex: 1 0 auto to .content so it grows to fill available space - Add margin-top: auto to footer as a fallback Also add: - Sticky footer test page to verify the fix - Dev Tools nav section with Widget Test and Sticky Footer Test pages
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThis PR implements a sticky footer layout pattern. The core changes replace the previous min-height and layout containment approach in the footer and main content area with flexbox-based rules: footer.footer gains Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
The contain: layout and contain: layout style properties were causing layout recalculations during scroll, making the footer appear to jump. Also removed unnecessary min-height: 300px from footer which was reserving excessive space.
The docs pages use .docs-footer class, not footer.footer. Changed margin-top from fixed 64px to auto so footer pushes to bottom when content is short.
The back-to-top button was using static positioning with margin-top: 150px. When JavaScript toggled it from display:none to display:flex at scrollY > 300, it added ~175px to the document flow, causing the footer to jump down. Changed to position: fixed at bottom of viewport so showing/hiding the button doesn't affect layout.
Repositioned from center (left: 50%) to bottom-right (right: 24px, bottom: 100px) to avoid overlapping the contribution links in the feedback section.
micheleRP
approved these changes
May 27, 2026
Contributor
micheleRP
left a comment
micheleRP
left a comment
There was a problem hiding this comment.
Review
Approving — idiomatic flexbox sticky-footer pattern, clean implementation, deploy preview is green.
Worth verifying before merge
- CLS impact —
footer.footerlosesmin-height: 300pxandcontain: layout style, both of which had comments calling them out as "Reserve space to prevent CLS" / "Isolate rendering". The new sticky-footer flow may compensate naturally, but it's worth a Lighthouse / CLS spot-check on the deploy preview before merging. .back-to-topplacement —position: fixed; bottom: 100px; right: 24px. On short pages the footer sits at the viewport bottom, so the button may visually overlap or sit very close to the footer. On long pages, 100px from the bottom puts it mid-screen rather than near the edge. A quick visual sanity check across page lengths would be reassuring.
Coordination
preview-src/ui-model.yml— this PR adds a "Dev Tools" parent + sticky footer test link. PR #381 also adds a "Dev Tools" parent + a different test link. Whichever lands second will need a merge-conflict resolution that combines both entries.
What works well
- Idiomatic
flex: 1 0 auto+margin-top: autopattern. - Replaces the hacky
margin-top: 150pxon back-to-top with proper fixed positioning. - New
sticky-footer-test.adocpreview page gives a regression test surface. - All checks green.
- Restore min-height: 200px on footer.footer to reserve space and reduce CLS - Move back-to-top from bottom: 100px to bottom: 24px to sit at viewport edge Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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.
Summary
Fix the footer jumping/floating issue caused by the back-to-top button affecting document flow.
Problem
On pages with minimal content, the footer would "jump" when scrolling past 300px because the back-to-top button used
position: staticwithmargin-top: 150px. When JavaScript toggled it fromdisplay: nonetodisplay: flex, it added ~175px to the document flow.Solution
Changed
.back-to-topto useposition: fixedso showing/hiding the button doesn't affect layout:Files Changed
src/css/doc.csssrc/css/main.csssrc/css/footer.cssPreview Links
Test the fix on these pages:
Test Plan