From 287eafc47ee425104d0447a64425758dbd25e016 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 21 May 2026 22:05:42 +0200
Subject: [PATCH] fix(ui): reserve loaded-card height on workouts + drug-level
 loading states

`RecentWorkoutsTile` loading branch and the GLP-1 `DrugLevelChart`
loading branch both rendered an unsized centred spinner / hint, so
the surrounding dashboard layout reflowed once the data resolved.
Add `min-h-[10rem]` to the workouts tile and align the drug-level
loading height with the loaded chart's 240 px so neither tile
shifts the rest of the page when data lands.
---
 src/components/dashboard/recent-workouts-tile.tsx | 5 ++++-
 src/components/medications/DrugLevelChart.tsx     | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/dashboard/recent-workouts-tile.tsx b/src/components/dashboard/recent-workouts-tile.tsx
index 88b5a2a3f..69e6c26dd 100644
--- a/src/components/dashboard/recent-workouts-tile.tsx
+++ b/src/components/dashboard/recent-workouts-tile.tsx
@@ -123,9 +123,12 @@ export function RecentWorkoutsTile() {
       </div>
 
       {isLoading ? (
+        // v1.4.43 W11-L6 — reserve roughly the loaded tile height
+        // (3 workouts × ~3 rem rows + spacing) so the surrounding
+        // dashboard layout doesn't reflow once the data lands.
         <p
           data-slot="recent-workouts-loading"
-          className="text-muted-foreground text-xs"
+          className="text-muted-foreground min-h-[10rem] text-xs"
         >
           {t("dashboard.recentWorkouts.loading")}
         </p>
diff --git a/src/components/medications/DrugLevelChart.tsx b/src/components/medications/DrugLevelChart.tsx
index 5b1e44bbe..e414c2bbe 100644
--- a/src/components/medications/DrugLevelChart.tsx
+++ b/src/components/medications/DrugLevelChart.tsx
@@ -228,8 +228,10 @@ export function DrugLevelChart({ medication, asOf }: DrugLevelChartProps) {
       knownState={researchMode}
     />
   ) : isLoading ? (
+    // v1.4.43 W11-L6 — match the loaded chart height (240 px) so the
+    // dashboard tile doesn't reflow when the levels render.
     <div
-      className="flex h-[220px] items-center justify-center"
+      className="flex h-[240px] min-h-[240px] items-center justify-center"
       data-slot="drug-level-chart-loading"
     >
       <Loader2 className="text-primary h-6 w-6 animate-spin motion-reduce:animate-none" />