From 4038cfcffe0e81605dbfdaa0fc638ee924a623d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Mon, 1 Jun 2026 23:42:38 +0200
Subject: [PATCH] fix(medications): drop the empty streak row from the
 compliance bars

The streak flame's flex wrapper rendered unconditionally, so a
zero-streak medication left a residual gap below the two compliance bars
from the wrapper's row plus the stack's vertical spacing. Mount the
wrapper only when there is a streak to show.
---
 .../card-parts/medication-compliance-bars.tsx          | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/medications/card-parts/medication-compliance-bars.tsx b/src/components/medications/card-parts/medication-compliance-bars.tsx
index 051b3e343..cd613b19d 100644
--- a/src/components/medications/card-parts/medication-compliance-bars.tsx
+++ b/src/components/medications/card-parts/medication-compliance-bars.tsx
@@ -64,14 +64,16 @@ export function MedicationComplianceBars({
         <Progress value={rate30} className="h-2" aria-label={longLabel} />
       </div>
 
-      <div className="flex items-center gap-4 text-xs">
-        {streak > 0 && (
+      {/* Streak flame — only mounted when there's a streak so an empty
+          row doesn't leave a residual gap below the bars. */}
+      {streak > 0 && (
+        <div className="flex items-center gap-4 text-xs">
           <span className="text-dracula-orange flex items-center gap-1 font-medium">
             <Flame className="h-3.5 w-3.5" />
             {streak} {t("medications.dayStreak")}
           </span>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 }