Fix footer navigation scroll behavior for Contact and other links#336
Conversation
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe Footer component adds a smooth scroll-to-top handler and applies it to several navigation links. A new internal ChangesSmooth scroll-to-top on footer navigation
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested labels
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)
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 |
![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 `@client/src/components/Footer.tsx`:
- Around line 130-141: The footer has inconsistent use of the scroll-reset
handler: ensure every internal Link in the Footer component uses the existing
handleNavigation handler (and retains className={linkClass}) so clicks reset
scroll; update all footer links including Terms, Privacy, Refunds, Shipping and
any other internal routes to include onClick={handleNavigation} (and remove it
only for external links), locating them by the Footer component and the
handleNavigation identifier.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 377834f4-6ce5-45e8-b941-59e084200f3c
📒 Files selected for processing (1)
client/src/components/Footer.tsx
| <li><Link to="/register" className={linkClass} onClick={handleNavigation}>Start free</Link></li> | ||
| <li><Link to="/login" className={linkClass} onClick={handleNavigation}>Sign in</Link></li> | ||
| <li><Link to="/blog" className={linkClass} onClick={handleNavigation}>Blog</Link></li> | ||
| <li> | ||
| <Link | ||
| to="/contact" | ||
| className={linkClass} | ||
| onClick={handleNavigation} | ||
| > | ||
| Contact | ||
| </Link> | ||
| </li> |
There was a problem hiding this comment.
Apply scroll reset consistently to all internal footer links.
Right now only some internal links call handleNavigation; links like Terms, Privacy, Refunds, Shipping, and other internal footer routes still preserve prior scroll position. This leaves the original UX issue partially unresolved.
Suggested fix
- <Link to="/terms" className="hover:text-stone-400 transition-colors no-underline">Terms</Link>
- <Link to="/privacy" className="hover:text-stone-400 transition-colors no-underline">Privacy</Link>
- <Link to="/refund" className="hover:text-stone-400 transition-colors no-underline">Refunds</Link>
- <Link to="/shipping" className="hover:text-stone-400 transition-colors no-underline">Shipping</Link>
+ <Link to="/terms" className="hover:text-stone-400 transition-colors no-underline" onClick={handleNavigation}>Terms</Link>
+ <Link to="/privacy" className="hover:text-stone-400 transition-colors no-underline" onClick={handleNavigation}>Privacy</Link>
+ <Link to="/refund" className="hover:text-stone-400 transition-colors no-underline" onClick={handleNavigation}>Refunds</Link>
+ <Link to="/shipping" className="hover:text-stone-400 transition-colors no-underline" onClick={handleNavigation}>Shipping</Link>Also applies to: 203-213
🤖 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 `@client/src/components/Footer.tsx` around lines 130 - 141, The footer has
inconsistent use of the scroll-reset handler: ensure every internal Link in the
Footer component uses the existing handleNavigation handler (and retains
className={linkClass}) so clicks reset scroll; update all footer links including
Terms, Privacy, Refunds, Shipping and any other internal routes to include
onClick={handleNavigation} (and remove it only for external links), locating
them by the Footer component and the handleNavigation identifier.
|
Updated the PR by resolving the merge conflicts and applying the scroll reset behavior consistently across all internal footer navigation links. The footer navigation now redirects users to the top of the destination page for a smoother UX experience. Looking forward to the review. Thanks! |
Sachinchaurasiya360
added
good first issue
2 participants
Description
This PR improves the footer navigation UX by ensuring users are redirected to the top of the destination page when clicking footer navigation links such as Contact, Blog, Terms, Privacy, and other internal routes.
Previously, navigation preserved the existing scroll position, which made it appear as though the Contact page was not opening correctly because users landed near the footer section instead of the top of the page.
Changes Made
Issue Fixed
Fixes #152
Summary by CodeRabbit