From 3671657d11f4e5b678e6f08f9d737a76f3b747cb Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Wed, 6 May 2026 21:34:56 +0100
Subject: [PATCH] fix: chart bars use pixel heights instead of percentages

Percentage heights relative to a flex parent are unreliable without explicit
height on the parent chain. Compute bar heights directly in pixels (max 160px)
to guarantee visible bars regardless of flex/CSS cascade.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/views/DashboardView.vue | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/web/src/views/DashboardView.vue b/web/src/views/DashboardView.vue
index 30596e9..cd7a8bd 100644
--- a/web/src/views/DashboardView.vue
+++ b/web/src/views/DashboardView.vue
@@ -191,18 +191,14 @@ const DOW_LABELS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
             <p class="text-xs text-muted-foreground">No sessions in this period</p>
           </div>
           <!-- Chart -->
-          <div v-else class="h-40 flex items-stretch gap-px">
+          <div v-else class="h-40 flex items-end gap-px overflow-hidden">
             <div
               v-for="point in monthly"
               :key="point.date"
-              class="flex-1 flex flex-col justify-end items-center group"
+              class="flex-1 bg-primary/70 hover:bg-primary rounded-t transition-colors duration-150 cursor-default"
+              :style="{ height: `${Math.max((point.hours / maxMonthlyHours) * 160, 2)}px` }"
               :title="`${point.date}: ${formatDuration(point.hours)}`"
-            >
-              <div
-                class="w-full bg-primary/70 hover:bg-primary rounded-t transition-colors duration-150"
-                :style="{ height: `${(point.hours / maxMonthlyHours) * 100}%`, minHeight: '2px' }"
-              />
-            </div>
+            />
           </div>
         </CardContent>
       </Card>
@@ -228,15 +224,16 @@ const DOW_LABELS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
             <p class="text-xs text-muted-foreground">No sessions in this period</p>
           </div>
           <!-- Chart -->
-          <div v-else class="h-40 flex items-stretch gap-2">
+          <div v-else class="flex items-end gap-2" style="height: 160px">
             <div
               v-for="point in dow"
               :key="point.dow"
-              class="flex-1 flex flex-col justify-end items-center gap-1"
+              class="flex-1 flex flex-col items-center gap-1 cursor-default"
+              style="height: 160px; justify-content: flex-end"
             >
               <div
                 class="w-full bg-primary/70 hover:bg-primary rounded-t transition-colors duration-150"
-                :style="{ height: `${Math.max((point.hours / maxDowHours) * 100, 2)}%` }"
+                :style="{ height: `${Math.max((point.hours / maxDowHours) * 128, 2)}px` }"
                 :title="`${point.label}: ${formatDuration(point.hours)}`"
               />
               <span class="text-[10px] text-muted-foreground font-medium">{{ point.label.slice(0, 2) }}</span>