From b7b160d4fa8a305c9295524e2635df6cdd61ea05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 14 Jun 2026 10:52:39 +0200
Subject: [PATCH] fix(headers): keep list-page header actions on one row on
 mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The medications header used flex-wrap, so its action group (take-all
+ customize wrench + Add) dropped to a second row below the title on
narrow viewports. Drop the wrap and let the title block shrink: title
div gets min-w-0, subtitle truncates, action group keeps shrink-0 —
the wrench and Add stay top-right inline with the heading.

The mood, measurements and dashboard headers shared the same latent
root cause (title div missing min-w-0, subtitle/greeting not
truncating, action group not shrink-0). Apply the same minimal guard
so none of them can wrap or compress the actions either.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/measurements/page.tsx                 | 6 +++---
 src/app/medications/page.tsx                  | 6 +++---
 src/app/mood/page.tsx                         | 4 ++--
 src/components/dashboard/dashboard-header.tsx | 6 +++---
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/measurements/page.tsx b/src/app/measurements/page.tsx
index d22e405e9..c1dfcfacd 100644
--- a/src/app/measurements/page.tsx
+++ b/src/app/measurements/page.tsx
@@ -109,18 +109,18 @@ export default function MeasurementsPage() {
     <div className="space-y-6">
       <PullToRefreshIndicator {...pull} />
       <div className="flex items-center justify-between">
-        <div>
+        <div className="min-w-0">
           <h1 className="text-2xl font-bold tracking-tight">
             {t("measurements.title")}
           </h1>
           {/* v1.4.34 IW-G — subtitle now stays visible on mobile so
               the H1 isn't an unframed label. `text-xs sm:text-sm`
               preserves the desktop hierarchy. */}
-          <p className="text-muted-foreground text-xs sm:text-sm">
+          <p className="text-muted-foreground truncate text-xs sm:text-sm">
             {t("measurements.subtitle")}
           </p>
         </div>
-        <Button onClick={() => setDialogOpen(true)}>
+        <Button className="shrink-0" onClick={() => setDialogOpen(true)}>
           <Plus className="h-4 w-4" />
           {t("measurements.addMeasurement")}
         </Button>
diff --git a/src/app/medications/page.tsx b/src/app/medications/page.tsx
index 82eef3a4a..cc2ab5653 100644
--- a/src/app/medications/page.tsx
+++ b/src/app/medications/page.tsx
@@ -326,14 +326,14 @@ export default function MedicationsPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex flex-wrap items-start justify-between gap-3">
-        <div className="space-y-1">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 space-y-1">
           <h1 className="text-2xl font-bold tracking-tight">
             {t("medications.title")}
           </h1>
           {/* v1.4.34 IW-G — subtitle stays visible on mobile so the
               H1 isn't an unframed label. */}
-          <p className="text-muted-foreground text-xs sm:text-sm">
+          <p className="text-muted-foreground truncate text-xs sm:text-sm">
             {t("medications.subtitle")}
           </p>
         </div>
diff --git a/src/app/mood/page.tsx b/src/app/mood/page.tsx
index f18efa3ce..8d959076e 100644
--- a/src/app/mood/page.tsx
+++ b/src/app/mood/page.tsx
@@ -64,13 +64,13 @@ export default function MoodPage() {
     <div className="space-y-6">
       <PullToRefreshIndicator {...pull} />
       <div className="flex items-center justify-between">
-        <div>
+        <div className="min-w-0">
           <h1 className="text-2xl font-bold tracking-tight">
             {t("mood.title")}
           </h1>
           {/* v1.4.34 IW-G — subtitle stays visible on mobile so the
               H1 isn't an unframed label. */}
-          <p className="text-muted-foreground text-xs sm:text-sm">
+          <p className="text-muted-foreground truncate text-xs sm:text-sm">
             {t("mood.subtitle")}
           </p>
         </div>
diff --git a/src/components/dashboard/dashboard-header.tsx b/src/components/dashboard/dashboard-header.tsx
index d46f4a6d5..79aa15331 100644
--- a/src/components/dashboard/dashboard-header.tsx
+++ b/src/components/dashboard/dashboard-header.tsx
@@ -78,7 +78,7 @@ export function DashboardHeader({
         showGreeting && "sm:items-start",
       )}
     >
-      <div>
+      <div className="min-w-0">
         <h1 className="text-2xl font-bold tracking-tight">
           {t("dashboard.title")}
         </h1>
@@ -89,13 +89,13 @@ export function DashboardHeader({
              keeps the header from collapsing/growing around that swap. */
           <p
             data-slot="dashboard-header-greeting"
-            className="text-muted-foreground mt-1 min-h-5 text-sm"
+            className="text-muted-foreground mt-1 min-h-5 truncate text-sm"
           >
             {welcomeText}
           </p>
         ) : null}
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex shrink-0 items-center gap-2">
         {/* Customize shortcut to the dashboard-customization settings
             (the tile/layout editor at /settings/dashboard). Sits to
             the left of the add button as a monochrome ghost icon, with