From b97cc3cb6e03082191b89fd5de9be2a98628ba45 Mon Sep 17 00:00:00 2001
From: Bohan Jiang <52446949+Bohan-J@users.noreply.github.com>
Date: Mon, 18 May 2026 18:16:45 +0800
Subject: [PATCH] fix(autopilots): align trash icon with action buttons in
 webhook trigger row (#2805)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The TriggerRow's outer flex uses `items-start`, which made sense back
when every trigger only had one row of content (label + maybe a cron
expression). Once #2774 added the URL action row to webhook triggers
(Copy + Rotate buttons sitting on a second line inside the inner column),
the trash button stayed pinned to the top-right of the outer flex — it
visibly floats above the URL action buttons instead of lining up with
them, which reads as a layout glitch.

Move the trash button into the URL action row for webhook triggers so
all three action buttons (Copy, Rotate, Delete) share one flex container
and align by construction. Schedule and API triggers — which have no
URL row — keep the trash button pinned top-right (their bodies are
short enough that the top corner reads as "the row's right end").

Extract a `deleteButton` const so the JSX isn't duplicated, and add the
existing `delete_dialog.confirm` i18n string as the title attribute for
consistency with the other action buttons (Copy / Rotate already have
hover titles).

No behavioural change — same click handler, same confirm dialog.
---
 .../components/autopilot-detail-page.tsx      | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/views/autopilots/components/autopilot-detail-page.tsx b/packages/views/autopilots/components/autopilot-detail-page.tsx
index 5da9d14fe..e9e4aa095 100644
--- a/packages/views/autopilots/components/autopilot-detail-page.tsx
+++ b/packages/views/autopilots/components/autopilot-detail-page.tsx
@@ -314,6 +314,25 @@ function TriggerRow({ trigger, autopilotId }: { trigger: AutopilotTrigger; autop
   };
 
   const Icon = isWebhook ? Webhook : isApi ? Zap : Clock;
+  const showWebhookUrlRow = isWebhook && webhookUrl;
+
+  // Delete control extracted so a webhook trigger can render it inline
+  // with Copy / Rotate on the URL action row (where the other action
+  // buttons live), while schedule / api triggers — which have no URL row
+  // — keep it pinned to the row's top-right corner. Without this the
+  // trash icon visually floats above the URL action buttons because the
+  // outer flex uses `items-start`.
+  const deleteButton = (
+    <Button
+      size="icon"
+      variant="ghost"
+      className="h-7 w-7 shrink-0"
+      onClick={() => setConfirmOpen(true)}
+      title={t(($) => $.trigger_row.delete_dialog.confirm)}
+    >
+      <Trash2 className="h-3.5 w-3.5 text-muted-foreground" />
+    </Button>
+  );
 
   return (
     <div className="flex items-start gap-3 rounded-md border px-3 py-2">
@@ -346,7 +365,7 @@ function TriggerRow({ trigger, autopilotId }: { trigger: AutopilotTrigger; autop
             {t(($) => $.trigger_row.next_label, { date: formatDate(trigger.next_run_at) })}
           </div>
         )}
-        {isWebhook && webhookUrl && (
+        {showWebhookUrlRow && (
           <div className="mt-1.5 flex items-center gap-1.5">
             <code className="flex-1 min-w-0 truncate rounded bg-muted px-2 py-1 text-xs font-mono text-foreground">
               {webhookUrl}
@@ -370,17 +389,11 @@ function TriggerRow({ trigger, autopilotId }: { trigger: AutopilotTrigger; autop
             >
               <RotateCw className={cn("h-3.5 w-3.5 text-muted-foreground", rotateToken.isPending && "animate-spin")} />
             </Button>
+            {deleteButton}
           </div>
         )}
       </div>
-      <Button
-        size="icon"
-        variant="ghost"
-        className="h-7 w-7 shrink-0"
-        onClick={() => setConfirmOpen(true)}
-      >
-        <Trash2 className="h-3.5 w-3.5 text-muted-foreground" />
-      </Button>
+      {!showWebhookUrlRow && deleteButton}
       <AlertDialog open={confirmOpen} onOpenChange={(v) => { if (!v && !deleting) setConfirmOpen(false); }}>
         <AlertDialogContent>
           <AlertDialogHeader>