From 117eb87f756d840610048c435f00f71295e0c35d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Fri, 15 May 2026 19:02:07 +0200 Subject: [PATCH] fix(medications): widen the schedule day-of-week grid for narrow viewports and drop the DrugLevelChart dead axis labels MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The medication-form schedule editor's day-of-week row packed the wide "Daily" pill (min-w-24) into the same single-flex row as the seven weekday pills; at 320 px the row overflowed and the last weekday clipped off-screen. Stack the Daily pill above a fixed seven-column grid so every weekday keeps the 44 px tap-target floor regardless of container width. Drop two dead axis decorations from the GLP-1 DrugLevelChart: an empty `` child beneath the XAxis that rendered an invisible SVG node, and a duplicate Recharts `label={…}` prop on the YAxis that painted the unit-less caption inside a 1 px-wide axis where it could never be read. The external `

` above the chart remains the single source of truth for the caption. --- src/components/medications/DrugLevelChart.tsx | 29 +++++--------- .../medications/medication-form.tsx | 38 ++++++++++++------- 2 files changed, 35 insertions(+), 32 deletions(-) diff --git a/src/components/medications/DrugLevelChart.tsx b/src/components/medications/DrugLevelChart.tsx index 4d8964c7d..22fbd7f88 100644 --- a/src/components/medications/DrugLevelChart.tsx +++ b/src/components/medications/DrugLevelChart.tsx @@ -523,6 +523,9 @@ function ChartBody({ stroke="var(--border)" opacity={0.5} /> + {/* v1.4.27 MB6 CF-16 — dropped a stray empty `` child + that previously declared no content and rendered an + invisible SVG node beneath the x-axis. */} - - + /> {/* Research §2.3 — y-axis is unit-less. We hide tick labels and the axis line entirely; the human-readable label sits outside the chart frame, above. The `tick={false}` flag - suppresses the textual ticks per Recharts. */} + suppresses the textual ticks per Recharts. v1.4.27 MB6 + CF-16 — the duplicate Recharts `label={…}` prop dropped + here painted the same caption inside the SVG behind the + `width={1}` axis, where it could never be read. The + external `

` above the chart is the single source of + truth for the caption. */} null} diff --git a/src/components/medications/medication-form.tsx b/src/components/medications/medication-form.tsx index dda262861..89bcabd9a 100644 --- a/src/components/medications/medication-form.tsx +++ b/src/components/medications/medication-form.tsx @@ -902,18 +902,30 @@ export function MedicationForm({ -

- + {/* v1.4.27 MB6 CF-4 — the previous single-row + `flex w-full gap-1` layout placed the wide + "Daily" pill (min-w-24 ≈ 96 px) next to seven + weekday pills inside the same row. At 320 px + viewport widths the eighth child pushed the row + past the form edge and the last weekday clipped + off-screen. The new layout stacks the Daily + pill above a seven-column grid so each weekday + keeps the 44 px tap-target floor without + relying on the available width. The grid wraps + naturally at any container width because every + cell is one explicit grid track. */} + +
{getDayLabelsShort(t).map((label, dayIndex) => { const isSelected = s.daysOfWeek.includes(dayIndex); return ( @@ -921,7 +933,7 @@ export function MedicationForm({ key={dayIndex} type="button" onClick={() => toggleDay(i, dayIndex)} - className={`min-h-11 flex-1 rounded-md border text-xs font-medium transition-colors ${ + className={`min-h-11 rounded-md border text-xs font-medium transition-colors ${ isSelected ? "border-primary bg-primary text-primary-foreground" : "border-border/70 bg-muted text-foreground/75 hover:bg-accent hover:text-foreground"