Skip to content

Keep the footer on the fold when a page does not fill the screen #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fritzhand merged 1 commit into from
Jul 25, 2026
+12 −0
Merged

Keep the footer on the fold when a page does not fill the screen #5

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions web/assets/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,17 @@ html:focus-within { scroll-behavior: smooth; }
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
/* 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. */
Comment on lines +37 to +44

@coderabbitai coderabbitai Bot Jul 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 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.

display: flex;
flex-direction: column;
min-height: 100dvh;
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.65;
Expand Down Expand Up @@ -178,6 +189,7 @@ img, svg, video { max-width: 100%; height: auto; }
.layout {
display: grid;
grid-template-columns: 268px minmax(0, 1fr);
flex: 1 0 auto; /* take the slack, so the footer lands on the fold */
}
/* the rail is painted on the grid itself, so it runs unbroken from topbar
to footer even when the page is taller than the sticky sidebar */
Expand Down
Loading