feature added -scroll-to-top#453
Conversation
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughAdds a new client-side ChangesScroll to Top Button Implementation and Integration
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 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 |
👋 Thanks for opening a PR, @Vaibhav-221!Your PR has entered the 🚦 PR Review Pipeline.
What happens next
A pipeline status comment will appear below and update automatically as your PR progresses. While you wait
This comment is posted only once. |
github-actions
Bot
added
enhancement
|
Hii @piyushdotcomm, review the PR! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
app/layout.tsx (1)
11-11: ⚡ Quick winMove this into a shared UI location before wiring it into the root layout.
Since this is rendered globally, keeping it under
modules/dashboard/componentsmakes the app shell depend on a dashboard feature module. Moving it to a shared UI path will keep the boundary clean and match the intended ownership of this component.Also applies to: 92-92
🤖 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 `@app/layout.tsx` at line 11, The ScrollToTopButton import in app/layout.tsx currently pulls from modules/dashboard/components which makes the global layout depend on the dashboard feature; move the component file into a shared UI location (e.g., components/ui or shared/ui) and update the import in app/layout.tsx (the existing import of ScrollToTopButton and the other occurrence at line 92) to point to the new shared path; ensure the component export name remains ScrollToTopButton and adjust any internal relative imports inside the component after the move.
🤖 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 `@modules/dashboard/components/scroll-to-top-button.tsx`:
- Around line 25-27: The button's hidden state is only visual so it remains
focusable; update the ScrollToTopButton component (use the wrapperRef/button
element and the visibility state used for setting style.opacity/transform) to
also remove it from the tab order and assistive technology when hidden by adding
tabindex={-1}, aria-hidden="true", and disabled={true} (or conversely remove
those attributes when visible), or alternatively render the button conditionally
from React state so it is not in the DOM when not visible; apply the same change
for the second occurrence referenced around lines 65-69.
- Around line 21-28: Replace the immediate-visibility check (visible = scrollTop
> 0) with a threshold-based check using a reveal threshold (e.g., use a prop or
constant named revealThreshold, defaulting to 300) so the button only becomes
visible when scrollTop > revealThreshold; update the visible assignment and keep
the existing wrapperRef style updates (opacity, pointerEvents, transform,
background) intact, and if the component doesn't yet accept a revealThreshold
prop add one to the component signature and fallback to 300 when undefined.
- Around line 45-51: The scrollToTop function currently calls
window.scrollTo({behavior: "smooth"}) but then immediately forces
document.documentElement.scrollTop and document.body.scrollTop to 0 which
cancels the smooth animation; change scrollToTop to only perform the immediate
writes as a fallback when smooth scrolling is not supported: detect support with
a capability check (e.g., CSS && CSS.supports('scroll-behavior','smooth') or
feature-test whether window.scrollTo accepts a behavior option) and if supported
call window.scrollTo({top:0, behavior:'smooth'}), otherwise set
document.documentElement.scrollTop = 0 and document.body.scrollTop = 0; remove
the unconditional writes so smooth scrolling is not short-circuited.
---
Nitpick comments:
In `@app/layout.tsx`:
- Line 11: The ScrollToTopButton import in app/layout.tsx currently pulls from
modules/dashboard/components which makes the global layout depend on the
dashboard feature; move the component file into a shared UI location (e.g.,
components/ui or shared/ui) and update the import in app/layout.tsx (the
existing import of ScrollToTopButton and the other occurrence at line 92) to
point to the new shared path; ensure the component export name remains
ScrollToTopButton and adjust any internal relative imports inside the component
after the move.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 2a975654-a0ab-4d36-ac82-2d858931410a
📒 Files selected for processing (3)
app/dashboard/page.tsxapp/layout.tsxmodules/dashboard/components/scroll-to-top-button.tsx
Vaibhav-221
left a comment
Vaibhav-221
left a comment
There was a problem hiding this comment.
As per suggestion's, all issue resolved.
|
@piyushdotcomm, review the PR! |
|
@piyushdotcomm, Kindly look into it! |
1 participant
ClosesCloses #438
📌Summary
This PR adds a reusable Scroll to Top button and mounts it globally so users can quickly return to the top of long pages from anywhere in the app.
What Changed
ScrollToTopButtonUI component.aria-label="Scroll to top".Why?
Long pages can require a lot of manual scrolling once users reach deeper sections like pricing, content blocks, or the footer. This gives users a quick, familiar way to return to the top and improves navigation across the site.
Screen Recording
Desktops ViewportScreen.Recording.2026-06-02.223956.mp4
Mobile viewportScreen.Recording.2026-06-02.224046.mp4
Testing
Accessibility
aria-label="Scroll to top"for screen reader users.Summary by CodeRabbit
New Features
Style
Chores