From c824b68fd9d770a37078f3ddde55ec6508da6c71 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 28 Jul 2026 22:51:51 +0100
Subject: [PATCH 1/2] fix(webapp): restyle the leave and remove team member
 dialogs

The dialog was still built on the old Alert primitive, so the whole
question sat in the title, there was no header divider or Esc
affordance, and the footer used small right-aligned buttons. It now
uses the standard Dialog layout, and the copy names the person being
removed instead of only saying "them".
---
 .server-changes/remove-teammate-dialog.md     |  6 ++
 .../route.tsx                                 | 80 ++++++++++---------
 2 files changed, 50 insertions(+), 36 deletions(-)
 create mode 100644 .server-changes/remove-teammate-dialog.md

diff --git a/.server-changes/remove-teammate-dialog.md b/.server-changes/remove-teammate-dialog.md
new file mode 100644
index 0000000000..14c40e7fb3
--- /dev/null
+++ b/.server-changes/remove-teammate-dialog.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Removing a teammate now shows a clearer confirmation dialog that names the person you're removing.
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx
index 3e11636aee..cc2a95571d 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx
@@ -20,16 +20,6 @@ import { UserAvatar } from "~/components/UserProfilePhoto";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { CopyableText } from "~/components/primitives/CopyableText";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import {
-  Alert,
-  AlertCancel,
-  AlertContent,
-  AlertDescription,
-  AlertFooter,
-  AlertHeader,
-  AlertTitle,
-  AlertTrigger,
-} from "~/components/primitives/Alert";
 import { Button, ButtonContent, LinkButton } from "~/components/primitives/Buttons";
 import { PermissionButton } from "~/components/primitives/PermissionButton";
 import { DateTime } from "~/components/primitives/DateTime";
@@ -659,8 +649,14 @@ function LeaveRemoveButton({
       <LeaveTeamModal
         member={member}
         buttonText="Leave team"
-        title="Are you sure you want to leave the team?"
-        description={`You will no longer have access to ${organization.title}. To regain access, you will need to be invited again.`}
+        title="Leave team"
+        description={
+          <>
+            Are you sure you want to leave the team? You will no longer have access to{" "}
+            <span className="text-text-bright">{organization.title}</span>. To regain access, you
+            will need to be invited again.
+          </>
+        }
         actionText="Leave team"
       />
     );
@@ -684,8 +680,16 @@ function LeaveRemoveButton({
     <LeaveTeamModal
       member={member}
       buttonText="Remove from team"
-      title={`Are you sure you want to remove ${member.user.name ?? "them"} from the team?`}
-      description={`They will no longer have access to ${organization.title}. To regain access, you will need to invite them again.`}
+      title="Remove team member"
+      description={
+        <>
+          Are you sure you want to remove{" "}
+          <span className="text-text-bright">{member.user.name ?? member.user.email}</span> from the
+          team? They will no longer have access to{" "}
+          <span className="text-text-bright">{organization.title}</span>. To regain access, you will
+          need to invite them again.
+        </>
+      }
       actionText="Remove from team"
     />
   );
@@ -795,7 +799,7 @@ function LeaveTeamModal({
   member: Member;
   buttonText: string;
   title: string;
-  description: string;
+  description: React.ReactNode;
   actionText: string;
 }) {
   const [open, setOpen] = useState(false);
@@ -811,28 +815,32 @@ function LeaveTeamModal({
   });
 
   return (
-    <Alert open={open} onOpenChange={(o) => setOpen(o)}>
-      <AlertTrigger asChild>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
         <Button variant="secondary/small">{buttonText}</Button>
-      </AlertTrigger>
-      <AlertContent>
-        <AlertHeader>
-          <AlertTitle>{title}</AlertTitle>
-          <AlertDescription>{description}</AlertDescription>
-        </AlertHeader>
-        <AlertFooter>
-          <AlertCancel asChild>
-            <Button variant="secondary/small">Cancel</Button>
-          </AlertCancel>
-          <Form method="post" {...getFormProps(form)} onSubmit={() => setOpen(false)}>
-            <input type="hidden" value={member.id} name="memberId" />
-            <Button type="submit" variant="danger/small" form={form.id}>
-              {actionText}
-            </Button>
-          </Form>
-        </AlertFooter>
-      </AlertContent>
-    </Alert>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>{title}</DialogHeader>
+        <Form method="post" {...getFormProps(form)} onSubmit={() => setOpen(false)}>
+          <input type="hidden" value={member.id} name="memberId" />
+          <Paragraph variant="small" className="pb-4 pt-2">
+            {description}
+          </Paragraph>
+          <FormButtons
+            confirmButton={
+              <Button type="submit" variant="danger/medium">
+                {actionText}
+              </Button>
+            }
+            cancelButton={
+              <DialogClose asChild>
+                <Button variant="secondary/medium">Cancel</Button>
+              </DialogClose>
+            }
+          />
+        </Form>
+      </DialogContent>
+    </Dialog>
   );
 }
 

From 7e02339232ad301763e0aa18d0f90ebbf8d774f3 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 28 Jul 2026 22:55:09 +0100
Subject: [PATCH 2/2] chore: drop the release note for the dialog restyle

---
 .server-changes/remove-teammate-dialog.md | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 .server-changes/remove-teammate-dialog.md

diff --git a/.server-changes/remove-teammate-dialog.md b/.server-changes/remove-teammate-dialog.md
deleted file mode 100644
index 14c40e7fb3..0000000000
--- a/.server-changes/remove-teammate-dialog.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-area: webapp
-type: improvement
----
-
-Removing a teammate now shows a clearer confirmation dialog that names the person you're removing.