From c293f23ac3d97c9b7f31ae2b5b041805ac90896d Mon Sep 17 00:00:00 2001
From: Eugene Vyborov <eugene@beingluminous.com>
Date: Wed, 24 Jun 2026 18:06:48 +0100
Subject: [PATCH] fix(ui): slim the Overview executions-by-type bars

The "Executions by type" stacked bars rendered full-width with a 1px
gap, so a busy agent's week read as a solid wall of color. Cap each
bar at 56px and center it inside its (still full-width) hover column,
and soften the top corner. The column stays flex-1 so spacing/tooltips
are unchanged and wider windows (14d/30d) thin naturally.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/frontend/src/components/StackedBarChart.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/components/StackedBarChart.vue b/src/frontend/src/components/StackedBarChart.vue
index 97eb00321..ba326144f 100644
--- a/src/frontend/src/components/StackedBarChart.vue
+++ b/src/frontend/src/components/StackedBarChart.vue
@@ -74,20 +74,20 @@ function showLabel(i) {
       <div
         v-for="(d, i) in data"
         :key="d.date"
-        class="relative flex-1 flex flex-col-reverse justify-start min-w-0"
+        class="relative flex-1 flex flex-col-reverse justify-start items-center min-w-0"
         @mouseenter="hover = i"
         @mouseleave="hover = null"
       >
         <!-- baseline tick for empty days so the axis reads as continuous -->
         <div
           v-if="!d.total"
-          class="w-full rounded-sm bg-gray-200 dark:bg-gray-700"
+          class="w-full max-w-[56px] rounded-sm bg-gray-200 dark:bg-gray-700"
           style="height: 2px"
         ></div>
         <div
           v-for="b in bucketsForDay(d)"
           :key="b"
-          class="w-full first:rounded-t-sm"
+          class="w-full max-w-[56px] first:rounded-t-md"
           :style="{
             height: segHeight(d, b) + 'px',
             backgroundColor: colorFor(b),