Refactor(frontend): scrollbar #77
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThis update modifies several frontend files. The package file now adds a new dependency and removes two obsolete ones. The layout now renders with a standard Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🪧 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 kleros-website-v2 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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (6)
frontend/package.json(1 hunks)frontend/src/app/layout.tsx(1 hunks)frontend/src/components/Navbar/MobileMenu.tsx(3 hunks)frontend/src/components/Navbar/index.tsx(2 hunks)frontend/src/components/OverlayScrollbarMain.tsx(0 hunks)frontend/src/styles/globals.css(2 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/components/OverlayScrollbarMain.tsx
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - kleros-website-v2
- GitHub Check: Header rules - kleros-website-v2
- GitHub Check: Pages changed - kleros-website-v2
🔇 Additional comments (5)
frontend/src/app/layout.tsx (1)
25-26: LGTM! Clean and simplified layout structure.The removal of custom scrollbar wrapper in favor of native scrolling improves maintainability. The addition of
min-w-80class helps prevent layout issues on narrow screens.Also applies to: 32-32
frontend/src/components/Navbar/index.tsx (1)
35-35: LGTM! Improved header width handling and scroll lock location.The width changes (
w-screen min-w-80) ensure consistent viewport coverage while maintaining minimum width. Moving scroll lock to MobileMenu component is a better separation of concerns.frontend/package.json (1)
15-15: Verify @uidotdev/usehooks version and compatibility.Let's ensure we're using the latest stable version of the package and check for any known issues.
✅ Verification successful
🌐 Web query:
What is the latest version of @uidotdev/usehooks?💡 Result:
The latest version of
@uidotdev/usehooksis 2.4.1, last published on October 23, 2023[4][6][9]. This version has remained stable for over a year according to npm release history[3][9], with no newer releases indicated in any of the package's documentation or official sources as of February 2025[3][4][6].For installation:
npm i @uidotdev/usehooksThe package provides both standard and experimental hooks, though development activity appears to have paused after October 2023 based on release patterns[3][9]. Developers should verify compatibility with their React v18+ projects before implementation[1][2][4].
Citations:
- 1: https://npm-compare.com/@uidotdev/usehooks
- 2: https://github.com/uidotdev/usehooks/blob/main/README.md
- 3: https://npm.io/package/@uidotdev/usehooks
- 4: https://www.npmjs.com/package/@uidotdev/usehooks
- 5: https://www.npmjs.com/package/usehooks-ts
- 6: https://www.npmjs.com/package/@uidotdev/usehooks?activeTab=code
- 7: https://app.soos.io/research/packages/NPM/@uidotdev/usehooks/version/2.1.1-experimental.1/
- 8: https://www.jsdelivr.com/package/npm/@uidotdev/usehooks
- 9: https://socket.dev/npm/package/@uidotdev/usehooks
- 10: https://usehooks.com/usemeasure
Dependency version verified: @uidotdev/usehooks is up-to-date.
- The package in the codebase is set to version ^2.4.1, which matches the latest stable version published on October 23, 2023.
- No newer stable release or compatibility issues have been reported for React v18+.
frontend/src/styles/globals.css (2)
21-42: New HTML Scrollbar Styles AddedThis block introduces a new
htmlselector that setsscrollbar-gutter: stable;and applies custom styles to the WebKit scrollbar pseudo-elements. These changes align with the removal of the custom scrollbar component and the objective to simplify and standardize scrollbar behavior.Recommendation: Verify that the
scrollbar-gutterproperty and the pseudo-element styles work consistently across all target browsers or consider adding fallback rules if needed.
44-50: Reordered Body StylingThe
bodyselector now follows thehtmlblock and retains standard properties (color, background, font settings) to ensure consistent typography and appearance. This ordering helps maintain proper cascade and clarity now that the custom overlay scrollbar components are removed.Recommendation: Double-check that no unintended specificity or cascade issues arise from the new order.
Summary by CodeRabbit
Chores
New Features
Refactor
Style