From c7e91ef2349050a133867dce15e65da8168147a1 Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Tue, 6 Oct 2026 07:24:53 +0200
Subject: [PATCH] Make dialog close and footer buttons 44px below md

The close button grows to a 44px target centred on where its icon already
sits, and every footer button is 44px tall, on a phone only; desktop keeps
its sizes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013GAeg4Jo6xjZzjwy9QDWMQ
---
 frontend/src/components/ui/dialog.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 1d09fde..cae17ac 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -65,9 +65,10 @@ function DialogContent({
       >
         {children}
         {showCloseButton && (
+          // 44px on a phone, centred on where the 16px icon sits on desktop.
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-0.5 right-0.5 flex size-11 items-center justify-center rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none md:top-4 md:right-4 md:size-auto [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           >
             <XIcon />
             <span className="sr-only">Close</span>
@@ -93,7 +94,8 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="dialog-footer"
       className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        // Whatever size a button asked for, it is a 44px target on a phone.
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end max-md:[&_button]:h-11",
         className
       )}
       {...props}