fix(cloud-tests): scroll connection-settings account tabs when they overflow

Merged
TO
5mo ago
+14-7

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 is inline-flex w-fit. It already carries overflow-x-auto, but that never kicks in: w-fit sizes it to its content, so it overflows its parent (the dialog) instead of scrolling within itself. And TabsList doesn't accept className, 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.tsx typechecks clean (the only app-typecheck failures are pre-existing/unrelated: a better-auth nested-node_modules artifact + two unrelated test files).
  • DS migration audit: change adds no @trycompai/ui / lucide-react imports. (The file's pre-existing @trycompai/ui/dialog import is left as-is — out of scope for this fix.)
  • Behavior: with many accounts the tab strip now scrolls horizontally; all accounts selectable. Single/few-account layout unchanged.

🤖 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.

  • Bug Fixes
    • Wrap the tab list in a div with w-full overflow-x-auto to constrain width and enable horizontal scrolling, avoiding clipping from the dialog’s overflow-hidden. Presentational change only; behavior for few accounts is unchanged.