Fix Contact section heading overlap beneath sticky navbar#367
Fix Contact section heading overlap beneath sticky navbar#367RiddhiBose wants to merge 4 commits into
Conversation
|
@RiddhiBose is attempting to deploy a commit to the Darshan Rajput's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughThe Contact page outer wrapper is changed from a ChangesContact Page Navbar Overlap Fix
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 `@app/contact/page.tsx`:
- Around line 62-63: The ContactPage component contains a semantic HTML
violation with a nested <main id="main-content"> element that conflicts with the
layout's own main container. Remove the outer <main> wrapper element from the
return statement, and transfer any styling classes (such as the gradient
background classes like bg-gradient-to-br from-gray-50 via-blue-50/30
to-purple-50/30 and dark mode variants) to the inner container div on line 64
instead. This ensures only one <main> element exists in the document hierarchy
while preserving all visual styling on the appropriate inner container.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
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 `@app/contact/page.tsx`:
- Line 63: The opening tag on line 63 uses a `<div>` element with the gradient
background styling, but the closing tag on line 272 incorrectly uses `</main>`
instead of `</div>`. This JSX tag mismatch will cause a parse error and break
the page. Replace the closing `</main>` tag on line 272 with `</div>` to
properly close the opening `<div>` wrapper.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
|
Hi! I believe the CodeRabbit comment is unrelated to the changes in this PR, as I only updated a style element. @Darshan3690 please verify whether the warning can be ignored or if any action is required from me? Thanks. |
1 participant
Description
Fixes the layout overlapping issue where the sticky floating navigation bar obstructs the top portion of the Contact page layout, as reported in #363. The container's top spacing has been adjusted to provide an appropriate layout offset.
Changes Made
-Modified the outermost container div inside the Contact component.
-Swapped py-16 for pt-32, which explicitly sets a 128px top padding offset to clear the sticky navbar while preserving the existing bottom layout spacing.
Related Issues
Closes #363
Verification
Before: The "Get In Touch" heading text was partially cut off and layered directly underneath the floating navbar container.
After: The full heading and description text render completely visible with clean breathing room beneath the navigation menu.
Summary by CodeRabbit