From 2bd659f66dd2bbc32a92afd4c52f90dc5710d4eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 15 May 2026 19:07:54 +0200
Subject: [PATCH] feat(ui): EmptyState gains a ctaSize prop and lifts to a
 full-width tap target on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

v1.4.27 MB7 / CF-36 — the empty-state CTA used to render at the
button primitive's default density, which on Pixel 5 left a ~32 px
tap target inside a ~280 px column. The new `ctaSize="lg"` lifts
the inner button (or `asChild` link) to the 44 px floor and stretches
the wrapper to `w-full sm:w-auto` so the CTA fills the column on
mobile and centres on tablet+ viewports. Existing call sites that
omit the prop keep the previous compact density.
---
 src/components/ui/empty-state.tsx | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/empty-state.tsx b/src/components/ui/empty-state.tsx
index 7e5e1e187..cdaad1d3a 100644
--- a/src/components/ui/empty-state.tsx
+++ b/src/components/ui/empty-state.tsx
@@ -36,6 +36,16 @@ export interface EmptyStateProps extends Omit<
    * Compact density for use inside tiles or table-row empty rows.
    */
   size?: "default" | "compact";
+  /**
+   * v1.4.27 MB7 / CF-36 — size hint for the inner action wrapper.
+   *
+   * `"default"` keeps the legacy inline-tight CTA. `"lg"` adds a
+   * `[&_button]:min-h-11 [&_a]:min-h-11` selector so the inner button
+   * or `asChild` link meets the 44 px floor on mobile, and lifts the
+   * wrapper to `w-full sm:w-auto` so the CTA fills the column at
+   * narrow viewports and centres at `sm+`.
+   */
+  ctaSize?: "default" | "lg";
 }
 
 function EmptyState({
@@ -45,6 +55,7 @@ function EmptyState({
   action,
   variant = "card",
   size = "default",
+  ctaSize = "default",
   className,
   ...props
 }: EmptyStateProps) {
@@ -81,7 +92,23 @@ function EmptyState({
           </p>
         ) : null}
       </div>
-      {action ? <div className="mt-1">{action}</div> : null}
+      {action ? (
+        <div
+          className={cn(
+            "mt-1",
+            // v1.4.27 MB7 / CF-36 — when `ctaSize === "lg"` the wrapper
+            // lifts to full-width on mobile and constrains the inner
+            // `<Button>` / `asChild` `<Link>` to the 44 px tap floor.
+            // The selectors target the wrapper's immediate child so
+            // existing CTAs that pass a plain `<Button>` (no class
+            // overrides) pick up the lift automatically.
+            ctaSize === "lg" &&
+              "w-full sm:w-auto [&>a]:min-h-11 [&>a]:w-full [&>button]:min-h-11 [&>button]:w-full sm:[&>a]:w-auto sm:[&>button]:w-auto",
+          )}
+        >
+          {action}
+        </div>
+      ) : null}
     </div>
   );