fix(layout): add bottom padding so content has breathing room#306
Merged
Conversation
Deploying rainbow with
|
| Latest commit: |
3becc73
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://09677a84.rainbow-ctx.pages.dev |
| Branch Preview URL: | https://layout-bottom-padding.rainbow-ctx.pages.dev |
4 tasks
Amund211
force-pushed
the
layout-bottom-padding
branch
from
2518240 to
04967e7
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adjusts the app’s top-level Layout to add a bottom-of-content spacer by wrapping <main>’s children in an inner container, aiming to ensure long pages have “breathing room” that scrolls with the content while preserving full-height layout behavior for centered routes.
Changes:
- Wrap
<main>children in aBoxwrapper instead of renderingchildrendirectly. - Add
paddingBottomvia the wrapper (instead of padding on<main>) and set the wrapper up as a full-height flex column.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Amund211
force-pushed
the
layout-bottom-padding
branch
from
04967e7 to
bc0914c
Compare
The main container had matching padding on all sides, but the visual weight of the header makes the bottom feel cramped — chart tooltips and the last section sit flush against the viewport edge. Wrap the children in a box with bottom padding so there's a real bottom-of-content spacer that scrolls with the content (padding on `<main>` itself doesn't work, since it's overflow:visible and the padding ends up flush with the viewport). The wrapper is a flex column (flexGrow:1) so it fills `<main>` when content is short — keeping a full-height containing block for routes that center on `height:100%` (e.g. the home page) — and grows past the viewport when content is long, so the spacer trails the content. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Amund211
force-pushed
the
layout-bottom-padding
branch
from
bc0914c to
3becc73
Compare
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
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
Wrap
<main>'s children in a box with bottom padding so pages get a real bottom-of-content spacer that scrolls with the content. Padding on<main>itself doesn't work — it'soverflow:visible, so the padding ends up flush with the viewport instead of trailing the content.The wrapper is a flex column (
flexGrow:1; display:flex; flexDirection:column) so it fills<main>when content is short — keeping a full-height containing block for routes that center onheight:100%(e.g. the home page) — and grows past the viewport when content is long, so the spacer trails the content.Extracted from the session detail page work (#256) as an independent change.
🤖 Generated with Claude Code