[fix] Make the project list in the account menu scrollable [AGE-4148] - #6110
Conversation
The switcher capped its list at three rows and hid the scrollbar, so an account with more projects than that had no way to see the rest and no sign there was more. Raise the cap to seven rows (40vh on short viewports, keeping the actions below on screen), drop the local scrollbar-hiding utilities so the app's global thumb paints, and scroll the project in effect into view when the menu opens. Closes #6097
dosubot
Bot
added
the
size:M
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) 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)
Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review. 📝 WalkthroughSummary by CodeRabbit
WalkthroughThe project and organization switcher now limits scrollable lists to 224px. Shared rows receive active state directly and apply selected styling with Chromium scroll targeting. Scrollbars remain available. ChangesProject and organization switcher
Estimated code review effort: 2 (Simple) | ~10 minutes Merge Risk: 🔵 Low · up to The scrollable project list fixes access to long project lists, but its fixed height can still push account-menu actions below the fold on very short screens. The PR is mergeable with explicit owner awareness or follow-up for this bounded UI issue. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
The capped list is one class constant, so it belongs beside the panel's other constants rather than in a component of its own. Replace the scroll-into-view effect with scroll-initial-target on the active row: Chromium opens the list on the current project, other browsers open it at the top.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
web/oss/src/components/Sidebar/components/ProjectOrgSwitcher/index.tsx (1)
45-46: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd the required overflow regression test.
Add frontend coverage for at least eight projects, a short viewport, visible fixed actions, and an active row loaded below the initial viewport. Issue
#6097explicitly requires this scenario.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 2eb6f2c0-54e7-4a0e-8b6c-b5612ac4f9b2
📒 Files selected for processing (1)
web/oss/src/components/Sidebar/components/ProjectOrgSwitcher/index.tsx
Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.
Railway Preview Environment
|
min(40vh,224px) only shrank the list below a 560px viewport, while the menu does not outgrow the window until about 404px, so the viewport half never did useful work and left the list ending mid-row when it did. max-h-56 is the same 224px on whole rows.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
web/oss/src/components/Sidebar/components/ProjectOrgSwitcher/index.tsx (1)
45-46: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd overflow-specific frontend coverage.
Render at least eight projects in a constrained viewport. Verify that the list scrolls and that
Switch organization,New project, theme, and logout remain reachable. Also test an active project outside the initial visible rows.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 377416c3-5246-462e-a2f7-0862aa0aa783
📒 Files selected for processing (1)
web/oss/src/components/Sidebar/components/ProjectOrgSwitcher/index.tsx
Included review availability: Your plan provides up to 8 included reviews per hour; 5 remain after this review.
The menu reads cleaner without a thumb sitting in it at rest, but the list still has to say that more projects follow. ag-scroll-quiet, the class the playground already uses, reserves a stable gutter and paints the thumb on hover or focus.
1 participant
Context
An account with more than three projects could not reach most of them from the account menu. The project list was capped at three rows (
max-h-24) and the switcher hid its own scrollbar, so the rest of the list was cut off with nothing on screen to suggest there was more below. The founder's screenshot shows a project row ending above "Switch organization" with no scrollbar in sight.Changes
One class constant does the work.
Before:
After:
max-h-56is 224px, or seven rows. "Switch organization", "New project", theme and logout sit outside the scroller, so they stay put however long the list gets. The menu only outgrows the window below a 404px viewport height.The two hand-rolled scrollbar-hiding utilities gave way to
ag-scroll-quiet, the class the playground already uses for this. At rest the menu looks the same as it did with no scrollbar at all. Put the pointer in the list and a slim thumb appears to say more projects follow, and the reserved gutter means nothing shifts when it does.Rowgained anactiveprop that carries the selected fill andscroll-initial-target: nearest, so a capped list opens on the project you are actually in rather than at the top. That property is Chromium-only. Firefox and Safari open the list at the top, which is what every browser does today, and the scrolling itself works everywhere.Both panels use the same list, so the organization switcher gets all of this too.
Tests / notes
pnpm lint-fixclean,pnpm types:checkclean for the touched file.<body>and Tab walks the rest of the page first. Real arrow-key navigation would mean rebuilding the menu aroundaria-activedescendant, the wayuseRovingListdoes for the slash palette. Worth its own issue.What to QA
Closes #6097