add onboarding

client/ui/frontend/src/components/dialog/ConfirmDialog.tsx

@@ -24,7 +24,7 @@ export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(func
             <div
                 ref={ref}
                 className={cn(
-                    "flex flex-col items-center gap-5 text-center px-8 py-6",
+                    "flex flex-col items-center gap-5 text-center px-8 pt-6 pb-7",
                     isMacOS() && "pt-10",
                 )}
             >

client/ui/frontend/src/components/dialog/DialogDescription.tsx

@@ -3,11 +3,32 @@ import { cn } from "@/lib/cn";
 
 // DialogDescription is the supporting description text rendered under a
 // DialogHeading inside ConfirmDialog (and similar dialog surfaces).
+type DialogAlign = "left" | "center" | "right";
+
+const alignClass: Record<DialogAlign, string> = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+};
+
 type DialogDescriptionProps = {
     children: ReactNode;
     className?: string;
+    align?: DialogAlign;
 };
 
-export const DialogDescription = ({ children, className }: DialogDescriptionProps) => (
-    <p className={cn("text-sm text-nb-gray-300 select-none", className)}>{children}</p>
+export const DialogDescription = ({ children, className, align = "center" }: DialogDescriptionProps) => (
+    // w-full for the same reason DialogHeading carries it — see the
+    // comment there. The default text-center remains visually identical
+    // to before; left/right alignment now anchors to the dialog content
+    // edge instead of collapsing to no-op on a content-width box.
+    <p
+        className={cn(
+            "w-full text-sm text-nb-gray-300 select-none",
+            alignClass[align],
+            className,
+        )}
+    >
+        {children}
+    </p>
 );

client/ui/frontend/src/components/dialog/DialogHeading.tsx

@@ -4,13 +4,34 @@ import { cn } from "@/lib/cn";
 // DialogHeading is the title text used inside ConfirmDialog (and any other
 // dialog-style surface with the same shape). Pair with DialogDescription
 // for the standard title/description stack.
+type DialogAlign = "left" | "center" | "right";
+
+const alignClass: Record<DialogAlign, string> = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+};
+
 type DialogHeadingProps = {
     children: ReactNode;
     className?: string;
+    align?: DialogAlign;
 };
 
-export const DialogHeading = ({ children, className }: DialogHeadingProps) => (
-    <p className={cn("text-base font-semibold text-nb-gray-50 select-none", className)}>
+export const DialogHeading = ({ children, className, align = "center" }: DialogHeadingProps) => (
+    // w-full so the alignClass actually has a box to anchor against.
+    // The wrapping <p> defaulted to content width inside a flex column,
+    // which made `text-left` a no-op (nothing to push the text away
+    // from). Stretching the element is invisible for the default
+    // text-center case (center of content == center of box) and lets
+    // text-left/right line up with the dialog's content edge.
+    <p
+        className={cn(
+            "w-full text-base font-semibold text-nb-gray-50 select-none",
+            alignClass[align],
+            className,
+        )}
+    >
         {children}
     </p>
 );