mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
fix(headers): keep list-page header actions on one row on mobile
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>
This commit is contained in:
1 parent
4111124f24
commit
b7b160d4fa
4 files changed
+11
-11
No files matched your search
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in new issue
Block a user