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"