From 7bfd5beeb220d58ca3f5ccba9e8723e7addc1b11 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:15:20 +0200
Subject: [PATCH] chore(dashboard): horizontal-scroll the tile strip on narrow
 viewports and wrap the onboarding header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

v1.4.27 MB7 / CF-42 + CF-44 — the dashboard tile strip switches to a
`flex overflow-x-auto` row at `<sm` so the tiles scroll horizontally
instead of wrapping to 3-4 rows on Pixel 5 / Galaxy Fold. From `sm:`
upwards the strip falls back to the canonical grid `auto-fit +
minmax(9rem, 1fr)` layout the maintainer pinned in v1.4.4. The
getting-started checklist header wraps onto a second row when the
title + dismiss button overflow, and `min-w-0` + `truncate` keep
the title from pushing the chevron off-screen on Galaxy Fold.
---
 src/app/page.tsx                              | 38 +++++++++++++------
 .../onboarding/getting-started-checklist.tsx  | 15 ++++++--
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 37e52b3c3..1609f10fc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -18,6 +18,7 @@ import {
   Waves,
 } from "lucide-react";
 import { convertGlucose, resolveGlucoseUnit } from "@/lib/glucose";
+import { cn } from "@/lib/utils";
 import {
   resolveDashboardLayout,
   type DashboardLayout,
@@ -1205,23 +1206,36 @@ export default function DashboardPage() {
                 height for any non-zero count. */}
             {trendCards.length > 0 && (
               <div
-                // CSS Grid with `auto-fit + minmax(9rem, 1fr)` is the v1.4.4
-                // attempt's flex-strip replacement: every tile gets EXACTLY
-                // the same width (1fr each in the row's track list), the gap
-                // is symmetric, and the strip starts and ends at the same
-                // x-coordinates as the charts below because both inherit the
-                // same parent container. When the row no longer fits a 9rem
-                // floor, the grid wraps to a new row instead of horizontal-
-                // scrolling — the maintainer tested both and prefers the v1.3-era
-                // wrap behaviour over the one-row scroll for the symmetry
-                // it preserves.
-                className="grid auto-rows-fr [grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))] gap-3 pb-2"
+                // v1.4.27 MB7 / CF-42 — at `<sm` the tile strip
+                // switches to a `flex overflow-x-auto` row so the
+                // tiles scroll horizontally instead of wrapping to
+                // 3-4 rows on Pixel 5 / Galaxy Fold. Each tile keeps
+                // a `min-w-[10rem]` so the user sees ~2.5 tiles per
+                // viewport — enough to read "there's more" without
+                // crowding the headline value on the visible tile.
+                // From `sm:` upwards the strip falls back to the
+                // canonical `grid auto-fit + minmax(9rem, 1fr)`
+                // layout (every tile equal width, wraps to a new
+                // row when the 9 rem floor no longer fits) that the
+                // maintainer pinned in v1.4.4.
+                //
+                // `snap-x snap-mandatory` makes the scroll feel
+                // deliberate on touch and is a no-op on the grid
+                // branch above `sm:`.
+                className={cn(
+                  "flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2",
+                  "sm:grid sm:snap-none sm:auto-rows-fr sm:overflow-visible",
+                  "sm:[grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))]",
+                )}
                 data-slot="dashboard-tile-strip"
                 data-tour-id="dashboard-tile-strip"
                 data-tile-count={trendCards.length}
               >
                 {trendCards.map((entry) => (
-                  <div key={entry.id} className="flex min-w-0">
+                  <div
+                    key={entry.id}
+                    className="flex min-w-[10rem] shrink-0 snap-start sm:min-w-0 sm:shrink"
+                  >
                     {entry.node}
                   </div>
                 ))}
diff --git a/src/components/onboarding/getting-started-checklist.tsx b/src/components/onboarding/getting-started-checklist.tsx
index 0ed7f2957..31dc0c70a 100644
--- a/src/components/onboarding/getting-started-checklist.tsx
+++ b/src/components/onboarding/getting-started-checklist.tsx
@@ -319,13 +319,20 @@ export function GettingStartedChecklist() {
       aria-labelledby="getting-started-title"
       className="bg-card border-border space-y-4 rounded-2xl border p-5 sm:p-6"
     >
-      <header className="flex items-start justify-between gap-3">
+      {/* v1.4.27 MB7 / CF-44 — `flex-wrap` on the header lets the
+          dismiss button drop to its own row when the German title +
+          subtitle overflow the visible width on Galaxy Fold / Pixel 5
+          (the previous `flex` layout collided the dismiss caption
+          against the chevron). `min-w-0` on the toggle button lets
+          the inner `<h2>` shrink + truncate cleanly instead of
+          pushing the chevron off-screen. */}
+      <header className="flex flex-wrap items-start justify-between gap-3">
         <button
           type="button"
           onClick={() => setExpanded((prev) => !prev)}
           aria-expanded={expanded}
           aria-controls="getting-started-body"
-          className="hover:text-foreground -m-1 flex flex-1 items-center gap-2 rounded-md p-1 text-left transition-colors"
+          className="hover:text-foreground -m-1 flex min-w-0 flex-1 items-center gap-2 rounded-md p-1 text-left transition-colors"
         >
           <ChevronDown
             aria-hidden="true"
@@ -335,10 +342,10 @@ export function GettingStartedChecklist() {
                 : "size-4 shrink-0 -rotate-90 transition-transform"
             }
           />
-          <div className="space-y-1">
+          <div className="min-w-0 space-y-1">
             <h2
               id="getting-started-title"
-              className="text-base font-semibold tracking-tight"
+              className="truncate text-base font-semibold tracking-tight"
             >
               {t("gettingStarted.title")}
             </h2>