feat: remove dashboard tab limit, scroll horizontally instead#53
Conversation
Drops the 6-tab cap (UI said "max 5") in useTabManager and the gated create button in CustomTabBar. The tab bar already scrolls horizontally via overflow-x-auto, so any number of boards is now supported.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR removes the five-tab limit for custom terminal boards. The ChangesTab Creation Limit Removal
Estimated Code Review Effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/TerminalsView/components/CustomTabBar.tsx (1)
132-132:⚠️ Potential issue | 🟠 Major | 🏗️ Heavy liftCreate dialog will be clipped by the
overflow-x-autocontainerPer the CSS spec, when
overflow-xis set to anything other thanvisible,overflow-yis implicitly promoted fromvisibletoautoas well. This means theoverflow-x-autowrapper on line 132 clips all overflow on both axes. Theabsolute top-fulldialog (line 194) extends below that container and will therefore be hidden/clipped once the tab bar is scrolled.Before this PR the tab count was capped at 5–6, so the bar almost never actually overflowed and the clip was harmless. Now that unlimited tabs are allowed the overflow path is common and the dialog will routinely be invisible.
Two practical fixes:
Option A – move the
+button outside the scroll region (zero-dependency, straightforward):♻️ Proposed layout restructure
- <div className="flex items-center gap-0.5 py-1 !rounded-none bg-secondary border-b border-border overflow-x-auto scrollbar-none"> - {tabs.map(...)} - - {/* Create tab button + dialog */} - <div className="relative shrink-0"> - <button ...> - {showCreateDialog && <div ref={createDialogRef} className="absolute ...">...</div>} - </div> - </div> + <div className="flex items-center !rounded-none bg-secondary border-b border-border"> + {/* Scrollable tab strip */} + <div className="flex items-center gap-0.5 py-1 overflow-x-auto scrollbar-none flex-1 min-w-0"> + {tabs.map(...)} + </div> + + {/* Create button lives OUTSIDE the overflow container */} + <div className="relative shrink-0 py-1"> + <button ...> + {showCreateDialog && <div ref={createDialogRef} className="absolute top-full right-0 mt-1 ...">...</div>} + </div> + </div>Option B – render the dialog in a portal (works without changing the layout, but requires importing
createPortaland computing position withgetBoundingClientRect).Option A is simpler and aligns better with the overall layout intent.
Also applies to: 182-223
🤖 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 `@src/components/TerminalsView/components/CustomTabBar.tsx` at line 132, The tab bar's overflow-x-auto wrapper in CustomTabBar.tsx clips the create-dialog (absolute top-full) when tabs scroll; fix by moving the "+" button and its associated dialog markup out of the scrolling container so the dialog is not a child of the overflow-x-auto element: locate the div with className "flex items-center gap-0.5 py-1 !rounded-none bg-secondary border-b border-border overflow-x-auto scrollbar-none" and keep only the scrollable tab list inside it (e.g. Tab elements / map over tabs), then place the Add/Plus button component (the element that opens the create dialog and the dialog itself) as a sibling after that div inside the CustomTabBar root container so its absolute-positioned menu is not clipped; adjust surrounding flex/wrapping styles to preserve visual layout and remove overflow-related clipping without introducing portals.
🤖 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.
Outside diff comments:
In `@src/components/TerminalsView/components/CustomTabBar.tsx`:
- Line 132: The tab bar's overflow-x-auto wrapper in CustomTabBar.tsx clips the
create-dialog (absolute top-full) when tabs scroll; fix by moving the "+" button
and its associated dialog markup out of the scrolling container so the dialog is
not a child of the overflow-x-auto element: locate the div with className "flex
items-center gap-0.5 py-1 !rounded-none bg-secondary border-b border-border
overflow-x-auto scrollbar-none" and keep only the scrollable tab list inside it
(e.g. Tab elements / map over tabs), then place the Add/Plus button component
(the element that opens the create dialog and the dialog itself) as a sibling
after that div inside the CustomTabBar root container so its absolute-positioned
menu is not clipped; adjust surrounding flex/wrapping styles to preserve visual
layout and remove overflow-related clipping without introducing portals.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 3a3d7fb6-d208-4ae4-821f-e4d28311e7d2
📒 Files selected for processing (3)
src/components/TerminalsView/components/CustomTabBar.tsxsrc/components/TerminalsView/hooks/useTabManager.tssrc/components/TerminalsView/index.tsx
💤 Files with no reviewable changes (2)
- src/components/TerminalsView/index.tsx
- src/components/TerminalsView/hooks/useTabManager.ts
1 participant
Summary
useTabManager(UI tooltip even said "max 5"), so users can create unlimited dashboard boards.canCreateTabprop / gated+button inCustomTabBar; the existingoverflow-x-auto scrollbar-nonecontainer handles horizontal scrolling when tabs overflow.whitespace-nowrap shrink-0, so they scroll cleanly side-to-side without a visible scrollbar.Test plan
localStorage.Summary by CodeRabbit