mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 04:50:59 +00:00
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:
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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user