Fix long connection names overflowing the removal dialog

e2e/scenarios/connection-remove-confirm.test.ts

@@ -41,7 +41,7 @@ scenario(
     const client = yield* makeClient(api, identity);
 
     const slug = IntegrationSlug.make(`rm-confirm-${randomBytes(4).toString("hex")}`);
-    const name = ConnectionName.make("main");
+    const name = ConnectionName.make("longconnectionnamethatmustwrapwithoutoverflow");
 
     yield* Effect.ensuring(
       Effect.gen(function* () {
@@ -73,9 +73,10 @@ scenario(
           const connections = page.locator("section").filter({
             has: page.getByRole("heading", { level: 3, name: "Connections" }),
           });
-          const row = connections.getByText("main", { exact: true });
+          const row = connections.getByText(String(name), { exact: true });
           const menuTrigger = connections.locator('button[aria-haspopup="menu"]');
           const confirm = page.getByRole("alertdialog");
+          const removeAction = confirm.getByRole("button", { name: "Remove connection" });
 
           await step("Open the integration's connections", async () => {
             await visit(page, `/integrations/${slug}`);
@@ -85,7 +86,24 @@ scenario(
           await step("Remove asks for confirmation instead of firing", async () => {
             await menuTrigger.click();
             await page.getByRole("menuitem", { name: "Remove" }).click();
-            await confirm.getByText("Remove main?").waitFor();
+            const title = confirm.getByText(`Remove ${String(name)}?`);
+            await title.waitFor();
+            await removeAction.getByText("Remove", { exact: true }).waitFor();
+
+            const layout = await confirm.evaluate((dialog) => {
+              const title = dialog.querySelector<HTMLElement>('[data-slot="alert-dialog-title"]');
+              if (title === null) return null;
+              const titleText = document.createRange();
+              titleText.selectNodeContents(title);
+              return {
+                dialogFits: dialog.scrollWidth <= dialog.clientWidth + 1,
+                titleWraps: titleText.getClientRects().length > 1,
+              };
+            });
+            expect(layout, "the confirmation title wraps without widening the dialog").toEqual({
+              dialogFits: true,
+              titleWraps: true,
+            });
           });
 
           await step("Cancel keeps the connection", async () => {
@@ -97,7 +115,7 @@ scenario(
           await step("Confirming actually removes it", async () => {
             await menuTrigger.click();
             await page.getByRole("menuitem", { name: "Remove" }).click();
-            await confirm.getByRole("button", { name: "Remove connection" }).click();
+            await removeAction.click();
             await confirm.waitFor({ state: "detached" });
             await row.waitFor({ state: "detached" });
           });

packages/react/src/components/accounts-section.tsx

@@ -571,13 +571,14 @@ function OwnerAccounts(props: {
             <AlertDialogCancel>Cancel</AlertDialogCancel>
             <AlertDialogAction
               variant="destructive"
+              aria-label="Remove connection"
               onClick={() => {
                 if (props.canManageConnections && removingConnection !== null) {
                   void handleRemove(removingConnection);
                 }
               }}
             >
-              Remove connection
+              Remove
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

packages/react/src/components/alert-dialog.tsx

@@ -93,7 +93,7 @@ function AlertDialogTitle({
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
       className={cn(
-        "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        "wrap-anywhere text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
         className,
       )}
       {...props}