fix(community): improve sidebar scroll behavior and remove nested scroll#272
Open
Musheer0 wants to merge 3 commits intojnsahaj:mainfrom
Open
fix(community): improve sidebar scroll behavior and remove nested scroll#272Musheer0 wants to merge 3 commits intojnsahaj:mainfrom
Musheer0 wants to merge 3 commits intojnsahaj:mainfrom
Conversation
- Add overflow handling and flex layout to community layout - Implement fade-y gradient mask for sidebar tags scroll - Add no-scrollbar utility for custom scrollbar hiding - Apply scrollbar-thin globally
|
@Musheer0 is attempting to deploy a commit to the Vercel Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughMoved overflow/scroll handling into inner wrappers of community layout and components, updated Tailwind classes for sidebar and tag list to use flex and scrolling, added Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ 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 |
![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 (5)
app/community/components/community-themes-content.tsx (1)
151-164: Minor: cleanup trailing whitespace in className strings.Several className strings have extra spaces that could be cleaned up for consistency.
🔧 Suggested fix
- <aside className="hidden w-56 shrink-0 border-r lg:flex flex-col "> - - <div className="p-4 "> + <aside className="hidden w-56 shrink-0 border-r lg:flex flex-col"> + <div className="p-4">- <div className="p-4 flex-1 flex-col flex overflow-y-auto "> + <div className="p-4 flex-1 flex-col flex overflow-y-auto">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/community/components/community-themes-content.tsx` around lines 151 - 164, Trim the trailing whitespace inside JSX className strings in the CommunityThemesContent component—specifically clean up the extra spaces in the aside's className ("hidden w-56 shrink-0 border-r lg:flex flex-col "), the first div's className ("p-4 "), and the scroll container div's className ("p-4 flex-1 flex-col flex overflow-y-auto ") so they use consistent single spaces; update the className values used in the aside element, the inner divs, and any sibling JSX nodes in community-themes-content.tsx to remove duplicate spaces.app/community/components/community-sidebar.tsx (2)
72-72: Consideroverflow-y-autoinstead ofoverflow-y-scroll.Using
overflow-y-scrollreserves space for a scrollbar even when content doesn't overflow. Since you're hiding the scrollbar with.no-scrollbar, this difference is mostly irrelevant here, butoverflow-y-autois more semantically accurate and consistent with similar patterns elsewhere in the codebase (e.g.,community-themes-content.tsxline 170).🔧 Suggested fix
- <div className="space-y-0.5 overflow-y-scroll pb-10 pt-6 -translate-y-5 no-scrollbar fade-y flex flex-col flex-1 "> + <div className="space-y-0.5 overflow-y-auto pb-10 pt-6 -translate-y-5 no-scrollbar fade-y flex flex-col flex-1">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/community/components/community-sidebar.tsx` at line 72, Replace the hard-coded CSS utility "overflow-y-scroll" with "overflow-y-auto" in the div that currently reads the class string containing "space-y-0.5 overflow-y-scroll pb-10 pt-6 -translate-y-5 no-scrollbar fade-y flex flex-col flex-1" inside the CommunitySidebar component (the div on the shown diff line), so the container only shows scroll behavior when content actually overflows and aligns with patterns used in community-themes-content.tsx.
42-42: Minor: trailing whitespace in className.🔧 Suggested fix
- <nav className="space-y-1 flex flex-col overflow-auto flex-1 "> + <nav className="space-y-1 flex flex-col overflow-auto flex-1">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/community/components/community-sidebar.tsx` at line 42, Remove the trailing whitespace and extra spaces in the className on the <nav> element in community-sidebar.tsx (the JSX nav with className="space-y-1 flex flex-col overflow-auto flex-1 "). Update the string to use a single space between class tokens and no leading/trailing spaces (e.g., "space-y-1 flex flex-col overflow-auto flex-1") so the className is normalized.app/globals.css (1)
164-166: Minor formatting: missing space and semicolon.The universal scrollbar rule has inconsistent formatting compared to the rest of the file.
🔧 Suggested fix
-*{ - `@apply` scrollbar-thin -} +* { + `@apply` scrollbar-thin; +}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/globals.css` around lines 164 - 166, The universal selector block using "*" has inconsistent formatting and is missing a trailing semicolon; update the rule for the "*" selector in globals.css to match file style by adding a space/line formatting and terminating the `@apply` statement with a semicolon (i.e., fix the "* { `@apply` scrollbar-thin }" declaration so the selector and the `@apply` rule follow the same spacing and include the semicolon).app/community/layout.tsx (1)
11-11: Minor: inconsistent indentation and trailing whitespace.🔧 Suggested fix
- <div className="wrapper flex-1 overflow-y-auto max-h-screen flex flex-col "> - <Header /> - <main className="flex flex-1 flex-col overflow-hidden">{children}</main> - </div> + <div className="wrapper flex-1 overflow-y-auto max-h-screen flex flex-col"> + <Header /> + <main className="flex flex-1 flex-col overflow-hidden">{children}</main> + </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/community/layout.tsx` at line 11, Fix the inconsistent indentation and remove trailing whitespace in the wrapper div in app/community/layout.tsx: locate the JSX element with className "wrapper flex-1 overflow-y-auto max-h-screen flex flex-col " (the wrapper div) and normalize its indentation to match surrounding JSX, and remove the extra spaces inside the className string so there are single spaces between class tokens and no trailing space at the end.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@package.json`:
- Line 91: The explicit dependency "@next/eslint-plugin-next" in package.json is
redundant and conflicts with the project's Next.js/eslint-config-next version
(15.4.10); either remove the "@next/eslint-plugin-next" entry entirely so
eslint-config-next@15.4.10 provides the plugin, or change its version to
"15.4.10" to match eslint-config-next and Next.js; update package.json
accordingly (modify or delete the "@next/eslint-plugin-next" line) and reinstall
dependencies to apply the change.
---
Nitpick comments:
In `@app/community/components/community-sidebar.tsx`:
- Line 72: Replace the hard-coded CSS utility "overflow-y-scroll" with
"overflow-y-auto" in the div that currently reads the class string containing
"space-y-0.5 overflow-y-scroll pb-10 pt-6 -translate-y-5 no-scrollbar fade-y
flex flex-col flex-1" inside the CommunitySidebar component (the div on the
shown diff line), so the container only shows scroll behavior when content
actually overflows and aligns with patterns used in
community-themes-content.tsx.
- Line 42: Remove the trailing whitespace and extra spaces in the className on
the <nav> element in community-sidebar.tsx (the JSX nav with
className="space-y-1 flex flex-col overflow-auto flex-1 "). Update the string
to use a single space between class tokens and no leading/trailing spaces (e.g.,
"space-y-1 flex flex-col overflow-auto flex-1") so the className is normalized.
In `@app/community/components/community-themes-content.tsx`:
- Around line 151-164: Trim the trailing whitespace inside JSX className strings
in the CommunityThemesContent component—specifically clean up the extra spaces
in the aside's className ("hidden w-56 shrink-0 border-r lg:flex flex-col "),
the first div's className ("p-4 "), and the scroll container div's className
("p-4 flex-1 flex-col flex overflow-y-auto ") so they use consistent single
spaces; update the className values used in the aside element, the inner divs,
and any sibling JSX nodes in community-themes-content.tsx to remove duplicate
spaces.
In `@app/community/layout.tsx`:
- Line 11: Fix the inconsistent indentation and remove trailing whitespace in
the wrapper div in app/community/layout.tsx: locate the JSX element with
className "wrapper flex-1 overflow-y-auto max-h-screen flex flex-col " (the
wrapper div) and normalize its indentation to match surrounding JSX, and remove
the extra spaces inside the className string so there are single spaces between
class tokens and no trailing space at the end.
In `@app/globals.css`:
- Around line 164-166: The universal selector block using "*" has inconsistent
formatting and is missing a trailing semicolon; update the rule for the "*"
selector in globals.css to match file style by adding a space/line formatting
and terminating the `@apply` statement with a semicolon (i.e., fix the "* { `@apply`
scrollbar-thin }" declaration so the selector and the `@apply` rule follow the
same spacing and include the semicolon).
🪄 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: db061a46-3d5e-40c4-a099-b88dd636c363
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
app/community/components/community-sidebar.tsxapp/community/components/community-themes-content.tsxapp/community/layout.tsxapp/globals.csspackage.json
| }, | ||
| "devDependencies": { | ||
| "@eslint/eslintrc": "^3", | ||
| "@next/eslint-plugin-next": "^16.2.2", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if eslint-config-next already provides `@next/eslint-plugin-next`
npm info eslint-config-next@15.4.10 dependencies 2>/dev/null | grep -i "eslint-plugin-next" || echo "Could not fetch dependency info"Repository: jnsahaj/tweakcn
Length of output: 99
🌐 Web query:
Does eslint-config-next include @next/eslint-plugin-next as a dependency?
💡 Result:
Yes, eslint-config-next includes @next/eslint-plugin-next as a dependency.
Citations:
- 1: https://github.com/vercel/next.js/blob/canary/packages/eslint-config-next/package.json
- 2: https://www.npmjs.com/package/eslint-config-next
Remove redundant @next/eslint-plugin-next or align version with project dependencies.
The @next/eslint-plugin-next at ^16.2.2 conflicts with the project's Next.js version (15.4.10). Additionally, eslint-config-next@15.4.10 already includes this plugin at 15.4.10 as a dependency, making this explicit declaration redundant and potentially causing version conflicts.
Either remove this entry since eslint-config-next already provides it, or align it to version 15.4.10 if an explicit dependency is required.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@package.json` at line 91, The explicit dependency "@next/eslint-plugin-next"
in package.json is redundant and conflicts with the project's
Next.js/eslint-config-next version (15.4.10); either remove the
"@next/eslint-plugin-next" entry entirely so eslint-config-next@15.4.10 provides
the plugin, or change its version to "15.4.10" to match eslint-config-next and
Next.js; update package.json accordingly (modify or delete the
"@next/eslint-plugin-next" line) and reinstall dependencies to apply the change.
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
app/globals.css (1)
171-196: Consider using@utilitydirective for consistency.The existing scrollbar utilities (lines 156-170) use Tailwind's
@utilitydirective, but these new classes are defined as plain CSS. Using@utilitywould allow them to work with Tailwind variants (e.g.,hover:no-scrollbar) and maintain consistency.Suggested refactor using `@utility`
- -.no-scrollbar::-webkit-scrollbar { - display: none; -} - -.no-scrollbar { - -ms-overflow-style: none; - scrollbar-width: none; -} -.fade-y { - mask-image: linear-gradient( - to bottom, - transparent 0%, - black 10%, - black 90%, - transparent 100% - ); - - -webkit-mask-image: linear-gradient( - to bottom, - transparent 0%, - black 10%, - black 90%, - transparent 100% - ); -} + +@utility no-scrollbar { + -ms-overflow-style: none; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } +} + +@utility fade-y { + mask-image: linear-gradient( + to bottom, + transparent 0%, + black 10%, + black 90%, + transparent 100% + ); + -webkit-mask-image: linear-gradient( + to bottom, + transparent 0%, + black 10%, + black 90%, + transparent 100% + ); +}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/globals.css` around lines 171 - 196, The new plain-CSS utilities (.no-scrollbar, .no-scrollbar::-webkit-scrollbar and .fade-y with -webkit-mask-image) should be converted into Tailwind `@utility` declarations so they support Tailwind variants (e.g., hover:no-scrollbar) and remain consistent with the existing scrollbar utilities; update the stylesheet to define these rules inside `@utility` blocks named .no-scrollbar and .fade-y, include vendor-prefixed selectors (::-webkit-scrollbar and -webkit-mask-image) inside those utilities, and keep the same property values so the behavior is unchanged while enabling Tailwind variant usage.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/globals.css`:
- Around line 180-196: The .fade-y rule currently has a blank line before the
-webkit-mask-image declaration which triggers the declaration-empty-line-before
Stylelint rule; remove that empty line so -webkit-mask-image immediately follows
mask-image (preserve existing indentation and the linear-gradient block
contents) to satisfy linting for the .fade-y selector.
---
Nitpick comments:
In `@app/globals.css`:
- Around line 171-196: The new plain-CSS utilities (.no-scrollbar,
.no-scrollbar::-webkit-scrollbar and .fade-y with -webkit-mask-image) should be
converted into Tailwind `@utility` declarations so they support Tailwind variants
(e.g., hover:no-scrollbar) and remain consistent with the existing scrollbar
utilities; update the stylesheet to define these rules inside `@utility` blocks
named .no-scrollbar and .fade-y, include vendor-prefixed selectors
(::-webkit-scrollbar and -webkit-mask-image) inside those utilities, and keep
the same property values so the behavior is unchanged while enabling Tailwind
variant usage.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
Comment on lines
+180
to
+196
| .fade-y { | ||
| mask-image: linear-gradient( | ||
| to bottom, | ||
| transparent 0%, | ||
| black 10%, | ||
| black 90%, | ||
| transparent 100% | ||
| ); | ||
|
|
||
| -webkit-mask-image: linear-gradient( | ||
| to bottom, | ||
| transparent 0%, | ||
| black 10%, | ||
| black 90%, | ||
| transparent 100% | ||
| ); | ||
| } No newline at end of file |
There was a problem hiding this comment.
Remove empty line before -webkit-mask-image to fix Stylelint error.
There's an empty line (line 188) before the -webkit-mask-image declaration which violates the declaration-empty-line-before rule.
Proposed fix
.fade-y {
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
-
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .fade-y { | |
| mask-image: linear-gradient( | |
| to bottom, | |
| transparent 0%, | |
| black 10%, | |
| black 90%, | |
| transparent 100% | |
| ); | |
| -webkit-mask-image: linear-gradient( | |
| to bottom, | |
| transparent 0%, | |
| black 10%, | |
| black 90%, | |
| transparent 100% | |
| ); | |
| } | |
| .fade-y { | |
| mask-image: linear-gradient( | |
| to bottom, | |
| transparent 0%, | |
| black 10%, | |
| black 90%, | |
| transparent 100% | |
| ); | |
| -webkit-mask-image: linear-gradient( | |
| to bottom, | |
| transparent 0%, | |
| black 10%, | |
| black 90%, | |
| transparent 100% | |
| ); | |
| } |
🧰 Tools
🪛 Stylelint (17.5.0)
[error] 189-195: Unexpected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/globals.css` around lines 180 - 196, The .fade-y rule currently has a
blank line before the -webkit-mask-image declaration which triggers the
declaration-empty-line-before Stylelint rule; remove that empty line so
-webkit-mask-image immediately follows mask-image (preserve existing indentation
and the linear-gradient block contents) to satisfy linting for the .fade-y
selector.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR Description
Changes
Before
After
Summary by CodeRabbit
Style
Chore