Compare commits

...

1 Commits

Author SHA1 Message Date
Jiang Bohan
948186a069 fix(autopilots): align trash icon with action buttons in webhook trigger row
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.
2026-05-18 18:11:21 +08:00

View File

@@ -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>