fix(web): align task confirmation copy (#2625)

apps/web/components/task/task-archive-confirm-dialog.tsx

@@ -18,7 +18,11 @@ import { useSubtaskCount } from "@/hooks/use-subtask-count";
 import { useTaskInFlight } from "@/hooks/use-task-in-flight";
 import { getCleanupSummary, getBulkCleanupSummary } from "./task-cleanup-summary";
 import { StillWorkingWarning } from "./task-still-working-warning";
-import { TASK_CONFIRM_CLASS, stopDialogPropagation } from "./task-confirm-dialog-shared";
+import {
+  TASK_CONFIRM_CLASS,
+  TASK_CONFIRM_HEADER_CLASS,
+  stopDialogPropagation,
+} from "./task-confirm-dialog-shared";
 import { useTranslation } from "react-i18next";
 
 type TaskArchiveConfirmDialogProps = {
@@ -131,7 +135,7 @@ export function TaskArchiveConfirmDialog({
   return (
     <AlertDialog open={open} onOpenChange={handleOpenChange}>
       <AlertDialogContent size="lg" className={TASK_CONFIRM_CLASS} onClick={stopDialogPropagation}>
-        <AlertDialogHeader>
+        <AlertDialogHeader className={TASK_CONFIRM_HEADER_CLASS}>
           <AlertDialogTitle className="text-base font-semibold">{title}</AlertDialogTitle>
           <AlertDialogDescription asChild className="text-sm leading-6">
             <div>

apps/web/components/task/task-confirm-dialog-shared.ts

@@ -1,4 +1,5 @@
 import type { MouseEvent } from "react";
 
 export const TASK_CONFIRM_CLASS = "font-sans !text-sm";
+export const TASK_CONFIRM_HEADER_CLASS = "place-items-start text-left";
 export const stopDialogPropagation = (event: MouseEvent<HTMLDivElement>) => event.stopPropagation();

apps/web/components/task/task-delete-confirm-dialog.tsx

@@ -17,7 +17,11 @@ import { useSubtaskCount } from "@/hooks/use-subtask-count";
 import { useTaskInFlight } from "@/hooks/use-task-in-flight";
 import { getCleanupSummary, getBulkCleanupSummary } from "./task-cleanup-summary";
 import { StillWorkingWarning } from "./task-still-working-warning";
-import { TASK_CONFIRM_CLASS, stopDialogPropagation } from "./task-confirm-dialog-shared";
+import {
+  TASK_CONFIRM_CLASS,
+  TASK_CONFIRM_HEADER_CLASS,
+  stopDialogPropagation,
+} from "./task-confirm-dialog-shared";
 import { useTranslation } from "react-i18next";
 
 type TaskDeleteConfirmDialogProps = {
@@ -77,7 +81,7 @@ export function TaskDeleteConfirmDialog({
   return (
     <AlertDialog open={open} onOpenChange={handleOpenChange}>
       <AlertDialogContent size="lg" className={TASK_CONFIRM_CLASS} onClick={stopDialogPropagation}>
-        <AlertDialogHeader>
+        <AlertDialogHeader className={TASK_CONFIRM_HEADER_CLASS}>
           <AlertDialogTitle className="text-base font-semibold">{title}</AlertDialogTitle>
           <AlertDialogDescription asChild className="text-sm leading-6">
             <div>

apps/web/e2e/tests/kanban/card-menu-delete-archive.spec.ts

@@ -33,6 +33,15 @@ test.describe("Kanban card actions menu — delete/archive does not navigate", (
     if (!dialogBox) throw new Error("delete confirmation dialog has no layout box");
     expect(dialogBox.width).toBeGreaterThanOrEqual(480);
     await expect(dialog).toHaveClass(/font-sans/);
+    const deleteHeader = dialog.locator('[data-slot="alert-dialog-header"]');
+    await expect
+      .poll(async () =>
+        deleteHeader.evaluate((element) => {
+          const style = getComputedStyle(element);
+          return { justifyItems: style.justifyItems, textAlign: style.textAlign };
+        }),
+      )
+      .toEqual({ justifyItems: "start", textAlign: "left" });
 
     // URL must not have changed (no navigation to /tasks/:id and no ?taskId=)
     expect(testPage.url()).toBe(startUrl);
@@ -65,6 +74,15 @@ test.describe("Kanban card actions menu — delete/archive does not navigate", (
     if (!dialogBox) throw new Error("archive confirmation dialog has no layout box");
     expect(dialogBox.width).toBeGreaterThanOrEqual(480);
     await expect(dialog).toHaveClass(/font-sans/);
+    const archiveHeader = dialog.locator('[data-slot="alert-dialog-header"]');
+    await expect
+      .poll(async () =>
+        archiveHeader.evaluate((element) => {
+          const style = getComputedStyle(element);
+          return { justifyItems: style.justifyItems, textAlign: style.textAlign };
+        }),
+      )
+      .toEqual({ justifyItems: "start", textAlign: "left" });
 
     expect(testPage.url()).toBe(startUrl);
   });

apps/web/e2e/tests/task/mobile-sidebar-task-actions.spec.ts

@@ -139,6 +139,15 @@ test.describe("Mobile sidebar task actions", () => {
     const dialog = testPage.getByRole("alertdialog");
     await expect(dialog).toBeVisible();
     await expect(dialog).toHaveClass(/font-sans/);
+    const header = dialog.locator('[data-slot="alert-dialog-header"]');
+    await expect
+      .poll(async () =>
+        header.evaluate((element) => {
+          const style = getComputedStyle(element);
+          return { justifyItems: style.justifyItems, textAlign: style.textAlign };
+        }),
+      )
+      .toEqual({ justifyItems: "start", textAlign: "left" });
     await expect(dialog.locator('[data-slot="alert-dialog-description"]')).toHaveClass(/text-sm/);
     await dialog.evaluate(async (element) => {
       await Promise.all(