Fix Scroll issue in Shifting and Resource #9487
Conversation
WalkthroughThe pull request modifies the Kanban board component in 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 (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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
🧹 Nitpick comments (1)
src/components/Kanban/Board.tsx (1)
Line range hint
159-184: Enhance accessibility for custom scroll areasThe ScrollArea component should maintain keyboard navigation and screen reader compatibility.
Consider adding the following accessibility enhancements:
- Ensure the ScrollArea has a proper ARIA label
- Add keyboard shortcuts for navigation
- Maintain focus management within the scrollable area
Example implementation:
-<ScrollArea className="h-[calc(100vh-250px)]" ref={sectionRef}> +<ScrollArea + className="h-[calc(100vh-250px)]" + ref={sectionRef} + aria-label={`${section.title} items`} + data-testid="kanban-section-scroll" +>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Kanban/Board.tsx(5 hunks)
🔇 Additional comments (2)
src/components/Kanban/Board.tsx (2)
12-13: LGTM: ScrollArea import added correctly
The addition of Shadcn's ScrollArea component aligns with the PR objective to improve scrolling functionality.
62-62: Verify scroll event listener behavior
The change to overflow-y-hidden might affect the scroll event listener in KanbanSection that uses scrollTop. Consider updating the scroll detection logic to work with the new ScrollArea component.
| className={ | ||
| "relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200" | ||
| } | ||
| className="relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider responsive design improvements
The current implementation has several areas for improvement:
- The fixed width of
w-[300px]might not be optimal for all screen sizes - The hard-coded height
calc(100vh-250px)might cause issues on different screen sizes and devices
Consider implementing a more responsive solution:
-className="relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200"
+className="relative mr-2 w-[min(300px,90vw)] shrink-0 rounded-xl bg-secondary-200"
-<ScrollArea className="h-[calc(100vh-250px)]" ref={sectionRef}>
+<ScrollArea className="h-[clamp(300px,calc(100vh-250px),800px)]" ref={sectionRef}>Also applies to: 159-184
|
Hey @Jeffrin2005, it’s not fetching beyond the default limit on scroll anymore, which it was doing previously. |
Jacobjeevan
added
duplicate
@AdityaJ2305 Bro can you explain more detail ? |
|
Yep, I'll share video with you here |
|
Hi @Jeffrin2005, have a look at this video. In the completed section on the right side, the next set of cards used to load on scroll previously. However, in the deployment of your PR, this functionality is missing. |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Scroll_Bar12.mp4
Merge Checklist
Summary by CodeRabbit
New Features
ScrollAreacomponent for improved scrolling experience in the Kanban sections.Bug Fixes