Oliver/cc-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: chart bars visible — use items-stretch + justify-end for correct height

Browse source 
items-end on parent prevents children from having height, making height:X%
resolve to 0. Switch to items-stretch so flex-1 wrappers get full h-40 height,
then justify-end aligns bars to the bottom.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-05-06 21:32:19 +01:00
parent e456fd2b09
commit ea7e44648b
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/src/views/DashboardView.vue
View file

@ -191,11 +191,11 @@ 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-end gap-px">
<div v-else class="h-40 flex items-stretch gap-px">
<div
v-for="point in monthly"
:key="point.date"
class="flex-1 flex flex-col items-center group"
class="flex-1 flex flex-col justify-end items-center group"
:title="`${point.date}: ${formatDuration(point.hours)}`"
>
<div
@ -228,11 +228,11 @@ 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-end gap-2">
<div v-else class="h-40 flex items-stretch gap-2">
<div
v-for="point in dow"
:key="point.dow"
class="flex-1 flex flex-col items-center gap-1"
class="flex-1 flex flex-col justify-end items-center gap-1"
>
<div
class="w-full bg-primary/70 hover:bg-primary rounded-t transition-colors duration-150"