From 26fb461cc79aa19d556b6d571f39fa40e9a1fd22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Tue, 2 Jun 2026 20:36:39 +0200
Subject: [PATCH] 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.
---
 .../medications/glp1-medication-card.tsx      | 29 +++++++------------
 .../medications/medication-card.tsx           | 25 +++++++---------
 2 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/src/components/medications/glp1-medication-card.tsx b/src/components/medications/glp1-medication-card.tsx
index deb0c3d6d..876e5fe03 100644
--- a/src/components/medications/glp1-medication-card.tsx
+++ b/src/components/medications/glp1-medication-card.tsx
@@ -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>
 
diff --git a/src/components/medications/medication-card.tsx b/src/components/medications/medication-card.tsx
index 26a2c9a11..407cb6442 100644
--- a/src/components/medications/medication-card.tsx
+++ b/src/components/medications/medication-card.tsx
@@ -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>