Fix footer not sticky on the bottom #1173
Conversation
added an new className "min-h-96" to the div where the post tabs are located.
I added an extra className "min-h-96" on the div containing the post tabs.That made the footer goes to the bottom of the page. I tried to make the Footer get Sticked to the bottom, using an "sticky bottom-0" on the Footer, but it didn't work. The component must be flex.
|
@lindotex is attempting to deploy a commit to the Codú Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes introduced in this pull request involve modifications to the layout of the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Hello @lindotex, thanks for opening your first Pull Request. The maintainers will review this Pull Request and provide feedback as soon as possible. Keep up the great work! |
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- app/(app)/my-posts/_client.tsx (1 hunks)
- sample.env (0 hunks)
💤 Files with no reviewable changes (1)
- sample.env
🔇 Additional comments (1)
app/(app)/my-posts/_client.tsx (1)
111-111: Implementation looks good, but verify the target page.The addition of
min-h-96class is a valid approach to ensure the container maintains minimum height, which helps with sticky footer positioning.However, there seems to be a discrepancy. The PR description mentions fixing the footer issue on the "New Post" page, but this change is in the "My Posts" page component. Let's verify the correct target:
app/(app)/my-posts/_client.tsx
Outdated
| @@ -108,7 +108,7 @@ const MyPosts = () => { | |||
| cancelText="Cancel" | |||
| /> | |||
| )} | |||
| <div className="relative mx-4 max-w-2xl bg-neutral-100 dark:bg-black sm:mx-auto"> | |||
| <div className="relative mx-4 min-h-96 max-w-2xl bg-neutral-100 dark:bg-black sm:mx-auto"> | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider a more robust layout solution.
While adding minimum height works, consider implementing a more robust sticky footer solution using flex layout to ensure consistent behavior across all pages:
- <div className="relative mx-4 min-h-96 max-w-2xl bg-neutral-100 dark:bg-black sm:mx-auto">
+ <div className="relative mx-4 flex min-h-[calc(100vh-theme('spacing.header'))] max-w-2xl flex-col bg-neutral-100 dark:bg-black sm:mx-auto">This approach:
- Uses viewport height calculation
- Accounts for header height (adjust
theme('spacing.header')to match your header height) - Ensures content fills available space
- Works consistently across all viewport sizes
Committable suggestion was skipped due to low confidence.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
added an grid behavior on the layout, specifying that the children component must fill the available space. That way, the footer will be always placed at the bottom.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
app/(app)/layout.tsx (1)
82-90: Consider adding semantic main wrapper.While the current implementation works well, consider wrapping the
childrenwith a semanticmaintag for better accessibility and HTML structure.<div className="grid min-h-screen grid-rows-[auto_1fr_auto]"> <Nav session={session} algoliaSearchConfig={algoliaSearchConfig} username={userData?.username || null} /> - {children} + <main>{children}</main> <Footer /> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- app/(app)/layout.tsx (1 hunks)
- app/(app)/my-posts/_client.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- app/(app)/my-posts/_client.tsx
🔇 Additional comments (1)
app/(app)/layout.tsx (1)
82-90: LGTM! Robust solution for sticky footer.The implementation using CSS Grid with
grid-rows-[auto_1fr_auto]is an excellent choice for ensuring the footer stays at the bottom. This approach:
- Automatically adjusts to content height
- Works consistently across browsers
- Maintains layout with minimal content
#✨ Codu Pull Request 💻Fixes #1171
Pull Request details
Any Breaking changes
Associated Screenshots
Desktop:
Mobile:
