Repository navigation
fix(cloud-tests): scroll connection-settings account tabs when they overflow - #3058
Merged
Merged
Conversation
…verflow The Connection Settings modal renders one tab per connected account via the design-system TabsList, which is `inline-flex w-fit`. With more than ~3 accounts the strip grows wider than the dialog and gets clipped by DialogContent's `overflow-hidden`, leaving the extra accounts unreachable (a customer with 6 AWS accounts could only see/select the first few). TabsList already has `overflow-x-auto` but it never triggers because `w-fit` sizes it to its content, so it overflows its parent instead of scrolling within itself — and TabsList doesn't accept `className`. Wrap it in a width-constrained `overflow-x-auto` container so the strip scrolls horizontally and every account stays reachable. Pure presentational change; no DS internals or imports touched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
|
🎉 This PR is included in version 3.73.3 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This branch was successfully deployed
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
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.
Problem
In the Cloud Tests Connection Settings modal, each connected account is a tab. With more than ~3 accounts the tab strip grows wider than the dialog and gets clipped (the modal is
overflow-hidden), so the extra accounts are unreachable — a customer with 6 AWS accounts could only see/select the first few.Cause
The account strip uses the design-system
<TabsList>, which isinline-flex w-fit. It already carriesoverflow-x-auto, but that never kicks in:w-fitsizes it to its content, so it overflows its parent (the dialog) instead of scrolling within itself. AndTabsListdoesn't acceptclassName, so it can't be constrained directly.Fix
Wrap
<TabsList>in a width-constrained scroll container (<div className="w-full overflow-x-auto">) so the strip scrolls horizontally and every account stays reachable. Purely presentational — no DS internals or imports changed.<Tabs value={activeProvider} onValueChange={setActiveProvider}> - <TabsList variant="default"> - {connectedProviders.map((p) => (...))} - </TabsList> + <div className="w-full overflow-x-auto"> + <TabsList variant="default"> + {connectedProviders.map((p) => (...))} + </TabsList> + </div> </Tabs>Verification
CloudSettingsModal.tsxtypechecks clean (the only app-typecheck failures are pre-existing/unrelated: abetter-authnested-node_modulesartifact + two unrelated test files).@trycompai/ui/lucide-reactimports. (The file's pre-existing@trycompai/ui/dialogimport is left as-is — out of scope for this fix.)🤖 Generated with Claude Code
Summary by cubic
Make the Connection Settings account tabs scroll horizontally when they overflow, so all connected accounts remain selectable in the Cloud Tests modal. Fixes clipped tabs when there are many accounts.
divwithw-full overflow-x-autoto constrain width and enable horizontal scrolling, avoiding clipping from the dialog’soverflow-hidden. Presentational change only; behavior for few accounts is unchanged.Written for commit 75f8360. Summary will update on new commits.