From 17aed374eb1964e77191ef5c2d597515bd8364f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 15 May 2026 18:45:08 +0200
Subject: [PATCH] chore(dashboard): apply the tap-target floor across the
 dashboard tile and onboarding chrome
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lift the GLP-1 tile range strip + tab pills, the getting-started
checklist dismiss buttons, and the settings reorder + source-ladder
arrow buttons so every interactive element clears the 44 px WCAG
2.5.5 floor.

- `glp1-tile.tsx`: range-strip radio buttons gain `inline-flex
  min-h-11 items-center justify-center px-3` so each preset sits at
  44 px; the tab pills (level / weight) lift the same way.
- `getting-started-checklist.tsx`: dismiss-all CTA drops `size="sm"`
  so it sits at the default 40 px primitive height; per-row dismiss
  `X` button wraps in `inline-flex h-11 w-11`.
- `dashboard-layout-section.tsx`: reorder up + down arrows `h-5 w-5`
  → `size-11`; column-header spacer widens to `w-11` to keep the
  layout grid aligned.
- `sources-section.tsx`: metric source ladder + device-type ladder
  up/down arrows stack vertically on `<sm` so each button keeps the
  `h-11 w-11` floor without crowding the row; sit side-by-side again
  from `sm:` up to preserve the desktop layout.
---
 src/components/dashboard/glp1-tile.tsx        |   4 +-
 .../onboarding/getting-started-checklist.tsx  |   3 +-
 .../settings/dashboard-layout-section.tsx     |  10 +-
 src/components/settings/sources-section.tsx   | 111 ++++++++++--------
 4 files changed, 69 insertions(+), 59 deletions(-)

diff --git a/src/components/dashboard/glp1-tile.tsx b/src/components/dashboard/glp1-tile.tsx
index 1470f7e39..ed2ff4c36 100644
--- a/src/components/dashboard/glp1-tile.tsx
+++ b/src/components/dashboard/glp1-tile.tsx
@@ -374,7 +374,7 @@ export function Glp1Tile() {
                 title={t(preset.titleKey)}
                 onClick={() => setRangePoints(preset.points)}
                 className={cn(
-                  "rounded px-1.5 py-0.5 font-medium tabular-nums",
+                  "inline-flex min-h-11 items-center justify-center rounded px-3 font-medium tabular-nums",
                   "hover:text-foreground focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none",
                   rangePoints === preset.points
                     ? "bg-card text-foreground shadow-sm"
@@ -455,7 +455,7 @@ function TabButton({
       data-active={active ? "true" : "false"}
       onClick={onClick}
       className={cn(
-        "rounded px-2 py-1 text-xs font-medium",
+        "inline-flex min-h-11 items-center justify-center rounded px-3 text-xs font-medium",
         "focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none",
         active
           ? "bg-card text-foreground shadow-sm"
diff --git a/src/components/onboarding/getting-started-checklist.tsx b/src/components/onboarding/getting-started-checklist.tsx
index 74f8c90ad..0ed7f2957 100644
--- a/src/components/onboarding/getting-started-checklist.tsx
+++ b/src/components/onboarding/getting-started-checklist.tsx
@@ -352,7 +352,6 @@ export function GettingStartedChecklist() {
         <Button
           type="button"
           variant="ghost"
-          size="sm"
           className="text-muted-foreground hover:text-foreground"
           onClick={() => setDismissedAll(true)}
         >
@@ -445,7 +444,7 @@ export function GettingStartedChecklist() {
                     })
                   }
                   aria-label={t("gettingStarted.dismissTooltip")}
-                  className="text-muted-foreground hover:text-foreground rounded p-1 transition-colors"
+                  className="text-muted-foreground hover:text-foreground inline-flex h-11 w-11 items-center justify-center rounded transition-colors"
                 >
                   <X className="size-4" />
                 </button>
diff --git a/src/components/settings/dashboard-layout-section.tsx b/src/components/settings/dashboard-layout-section.tsx
index 3a27b4ef6..10ec46de8 100644
--- a/src/components/settings/dashboard-layout-section.tsx
+++ b/src/components/settings/dashboard-layout-section.tsx
@@ -253,7 +253,7 @@ export function DashboardLayoutSection({ id }: { id: string }) {
               of the two surfaces (per feedback_dashboard_top_tiles
               _selectable.md). */}
           <div className="text-muted-foreground flex items-center gap-3 px-3 pb-1 text-[10px] font-medium tracking-wide uppercase">
-            <span className="w-5" aria-hidden="true" />
+            <span className="w-11" aria-hidden="true" />
             <span className="flex-1" />
             <span className="w-12 text-center">
               {t("dashboard.layoutTileColumn")}
@@ -280,25 +280,25 @@ export function DashboardLayoutSection({ id }: { id: string }) {
                       type="button"
                       variant="ghost"
                       size="icon"
-                      className="h-5 w-5"
+                      className="size-11"
                       onClick={() => move(widget.id, -1)}
                       disabled={index === 0 || saveMutation.isPending}
                       aria-label={t("dashboard.moveUp")}
                     >
-                      <ArrowUp className="h-3 w-3" />
+                      <ArrowUp className="h-4 w-4" />
                     </Button>
                     <Button
                       type="button"
                       variant="ghost"
                       size="icon"
-                      className="h-5 w-5"
+                      className="size-11"
                       onClick={() => move(widget.id, 1)}
                       disabled={
                         index === arr.length - 1 || saveMutation.isPending
                       }
                       aria-label={t("dashboard.moveDown")}
                     >
-                      <ArrowDown className="h-3 w-3" />
+                      <ArrowDown className="h-4 w-4" />
                     </Button>
                   </div>
                   <span className="flex-1 text-sm">{t(labelKey)}</span>
diff --git a/src/components/settings/sources-section.tsx b/src/components/settings/sources-section.tsx
index fb0f48f19..ecb6c24f8 100644
--- a/src/components/settings/sources-section.tsx
+++ b/src/components/settings/sources-section.tsx
@@ -344,30 +344,37 @@ export function SourcesSection() {
                         <span className="flex-1 text-sm">
                           {t(SOURCE_LABEL_KEYS[source] ?? source)}
                         </span>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon"
-                          className="h-11 w-11"
-                          onClick={() => moveSource(metric, index, -1)}
-                          disabled={index === 0 || saveMutation.isPending}
-                          aria-label={t("settings.sections.sources.moveUp")}
-                        >
-                          <ArrowUp className="h-3.5 w-3.5" />
-                        </Button>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon"
-                          className="h-11 w-11"
-                          onClick={() => moveSource(metric, index, 1)}
-                          disabled={
-                            index === list.length - 1 || saveMutation.isPending
-                          }
-                          aria-label={t("settings.sections.sources.moveDown")}
-                        >
-                          <ArrowDown className="h-3.5 w-3.5" />
-                        </Button>
+                        {/* v1.4.27 R3d MB2 — stack up/down vertically on
+                            narrow viewports so each button keeps the
+                            44 px floor without crowding the row. From
+                            `sm:` up the two buttons sit side-by-side
+                            again to preserve the desktop layout. */}
+                        <div className="flex flex-col gap-1 sm:flex-row sm:gap-2">
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="h-11 w-11"
+                            onClick={() => moveSource(metric, index, -1)}
+                            disabled={index === 0 || saveMutation.isPending}
+                            aria-label={t("settings.sections.sources.moveUp")}
+                          >
+                            <ArrowUp className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="h-11 w-11"
+                            onClick={() => moveSource(metric, index, 1)}
+                            disabled={
+                              index === list.length - 1 || saveMutation.isPending
+                            }
+                            aria-label={t("settings.sections.sources.moveDown")}
+                          >
+                            <ArrowDown className="h-4 w-4" />
+                          </Button>
+                        </div>
                       </li>
                     ))}
                   </ul>
@@ -502,32 +509,36 @@ export function SourcesSection() {
                       <span className="flex-1 text-sm">
                         {t(DEVICE_TYPE_LABEL_KEYS[deviceType])}
                       </span>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="h-11 w-11"
-                        onClick={() =>
-                          moveDeviceType(null, index, -1)
-                        }
-                        disabled={index === 0 || saveMutation.isPending}
-                        aria-label={t("settings.sections.sources.moveUp")}
-                      >
-                        <ArrowUp className="h-3.5 w-3.5" />
-                      </Button>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="h-11 w-11"
-                        onClick={() => moveDeviceType(null, index, 1)}
-                        disabled={
-                          index === list.length - 1 || saveMutation.isPending
-                        }
-                        aria-label={t("settings.sections.sources.moveDown")}
-                      >
-                        <ArrowDown className="h-3.5 w-3.5" />
-                      </Button>
+                      {/* v1.4.27 R3d MB2 — same stacked-on-mobile shape
+                          as the metric source rows above. */}
+                      <div className="flex flex-col gap-1 sm:flex-row sm:gap-2">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="h-11 w-11"
+                          onClick={() =>
+                            moveDeviceType(null, index, -1)
+                          }
+                          disabled={index === 0 || saveMutation.isPending}
+                          aria-label={t("settings.sections.sources.moveUp")}
+                        >
+                          <ArrowUp className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="h-11 w-11"
+                          onClick={() => moveDeviceType(null, index, 1)}
+                          disabled={
+                            index === list.length - 1 || saveMutation.isPending
+                          }
+                          aria-label={t("settings.sections.sources.moveDown")}
+                        >
+                          <ArrowDown className="h-4 w-4" />
+                        </Button>
+                      </div>
                     </li>
                   ))}
                 </ul>