fix(medications): drop the bottom-pinned action gap on the cards

The v1.9.0 equal-height change set the card content to a flex column and
pinned the action buttons to the bottom with mt-auto. On a shorter card next
to a taller one in the grid, that opened an empty gap between the content and
the buttons. The cards already stretch to a shared height via the grid, so the
buttons can sit directly after the content: drop the flex column and the
mt-auto wrapper on both card variants. The reserved dose-row slot stays, so the
dose lines still align across the grid; only the gap is gone.
This commit is contained in:
Marc-André Bombeck committed 2026-06-02 20:36:39 +02:00
1 parent 744e8e37ec
commit 26fb461cc7
2 files changed
+22 -32

No files matched your search

@@ -406,7 +406,7 @@ export function Glp1MedicationCard({
linkLabel={t("medications.openDetailPage")}
/>
<CardContent className="flex flex-1 flex-col space-y-3.5">
<CardContent className="space-y-3.5">
{/* Take-now / overdue / very-overdue pill, shared with the
generic medication card. The GLP-1 card historically
omitted this row, which made Mounjaro feel different from
@@ -423,13 +423,8 @@ export function Glp1MedicationCard({
{/* Injection state — last + next. The reserved min-height keeps a
card whose last-injection line is absent the same vertical
footprint as one that renders both lines, matching the generic
medication card's reserved last/next slot. This — together with
`h-full` + `mt-auto` — equalises the card height and pins a
shared bottom action baseline across the grid row. Note it does
NOT align the compliance bars row-for-row with a generic
sibling: the GLP-1-only rotation-hint block below pushes the
bars down by its own height, so only the header, the reserved
slot, and the pinned action row share a Y. */}
medication card's reserved last/next slot, so the dose rows line
up across the grid. */}
<div className="min-h-[2.75rem] space-y-1 text-sm">
{medication.lastTakenAt && (
<p className="text-muted-foreground">
@@ -503,17 +498,15 @@ export function Glp1MedicationCard({
{/* Primary actions row — shared with the generic medication
card. The GLP-1-specific side-effect quick-log lives in the
header-actions overflow (kebab), not this row, so Mounjaro
and Ramipril share the canonical two-button primary row.
Pinned to the bottom with `mt-auto` so the action baseline is
shared across every card in the grid row, identical to the
generic medication card. */}
and Ramipril share the canonical two-button primary row. The
row sits directly after the content (the card still fills the
grid cell via h-full, but the actions are not pushed to the
bottom — that left a void between the content and the buttons). */}
{medication.active && (
<div className="mt-auto pt-3.5">
<MedicationIntakeActions
intakeLoading={intakeLoading}
onRecordIntake={recordIntake}
/>
</div>
<MedicationIntakeActions
intakeLoading={intakeLoading}
onRecordIntake={recordIntake}
/>
)}
</CardContent>
+11 -14
View File
@@ -311,7 +311,7 @@ export function MedicationCard({
linkLabel={t("medications.openDetailPage")}
/>
<CardContent className="flex flex-1 flex-col space-y-3.5">
<CardContent className="space-y-3.5">
{/* Status, last & next intake info */}
{currentWindowStatus.status && (
<MedicationStatusPill
@@ -323,9 +323,8 @@ export function MedicationCard({
{/* Next / last intake — wrapped in a fixed min-height slot so a
card missing its last-dose line keeps the same vertical
footprint as a sibling that renders both lines. Without the
reserved height the compliance bars and action row below would
start at a different Y card-to-card across the 2-col grid. */}
footprint as a sibling that renders both lines, so the dose rows
line up across the 2-col grid. */}
<div className="min-h-[2.75rem] space-y-3.5">
{nextSchedule &&
currentWindowStatus.status !== "in_window" &&
@@ -409,17 +408,15 @@ export function MedicationCard({
/>
)}
{/* Quick actions — primary buttons of the medication card.
Pinned to the bottom with `mt-auto` so the action baseline is
shared across every card in the grid row regardless of how many
optional rows above it rendered. */}
{/* Quick actions — primary buttons of the medication card. They sit
directly after the content (the card still fills the grid cell via
h-full, but the actions are not pushed to the bottom — that left a
void between the content and the buttons on shorter cards). */}
{medication.active && (
<div className="mt-auto pt-3.5">
<MedicationIntakeActions
intakeLoading={intakeLoading}
onRecordIntake={recordIntake}
/>
</div>
<MedicationIntakeActions
intakeLoading={intakeLoading}
onRecordIntake={recordIntake}
/>
)}
</CardContent>