From 75f836006744adfa8aa2f7a0414dfec696c6fde0 Mon Sep 17 00:00:00 2001
From: Tofik Hasanov <annexcies@gmail.com>
Date: Mon, 8 Jun 2026 17:00:03 -0400
Subject: [PATCH] fix(cloud-tests): scroll connection-settings account tabs
 when they overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/CloudSettingsModal.tsx         | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/app/(app)/[orgId]/cloud-tests/components/CloudSettingsModal.tsx b/apps/app/src/app/(app)/[orgId]/cloud-tests/components/CloudSettingsModal.tsx
index ae35262cb6..82fe5fba96 100644
--- a/apps/app/src/app/(app)/[orgId]/cloud-tests/components/CloudSettingsModal.tsx
+++ b/apps/app/src/app/(app)/[orgId]/cloud-tests/components/CloudSettingsModal.tsx
@@ -121,13 +121,20 @@ export function CloudSettingsModal({
         {/* Provider selector (if multiple) */}
         {connectedProviders.length > 1 && (
           <Tabs value={activeProvider} onValueChange={setActiveProvider}>
-            <TabsList variant="default">
-              {connectedProviders.map((p) => (
-                <TabsTrigger key={p.connectionId} value={p.connectionId}>
-                  {p.name}
-                </TabsTrigger>
-              ))}
-            </TabsList>
+            {/* Scroll the account strip horizontally so connections beyond the
+                modal width stay reachable. TabsList is `w-fit`, so without a
+                width-constrained scroll container it overflows the dialog and
+                the extra accounts get clipped (the modal has overflow-hidden).
+                TabsList doesn't accept className, hence the wrapper. */}
+            <div className="w-full overflow-x-auto">
+              <TabsList variant="default">
+                {connectedProviders.map((p) => (
+                  <TabsTrigger key={p.connectionId} value={p.connectionId}>
+                    {p.name}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
           </Tabs>
         )}