From 336a6726f99118db940192a39d08d432bb09e8a9 Mon Sep 17 00:00:00 2001
From: Michael Preuss <michael@roocode.com>
Date: Wed, 11 Feb 2026 19:44:30 -0800
Subject: [PATCH] fix(web-evals): improve comparison chart bar spacing and
 height

---
 .../workers/[roleId]/compare/comparison-chart.tsx    | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/web-roo-code/src/app/evals/workers/[roleId]/compare/comparison-chart.tsx b/apps/web-roo-code/src/app/evals/workers/[roleId]/compare/comparison-chart.tsx
index 7029c90010..bc9b9cb8df 100644
--- a/apps/web-roo-code/src/app/evals/workers/[roleId]/compare/comparison-chart.tsx
+++ b/apps/web-roo-code/src/app/evals/workers/[roleId]/compare/comparison-chart.tsx
@@ -378,7 +378,7 @@ export function ComparisonChart({ recommendation, role, roleId }: ComparisonChar
 		[filteredCandidates, selectedLanguage, maxCost, maxTime],
 	)
 
-	const chartHeight = Math.max(300, chartData.length * 60 + 80)
+	const chartHeight = Math.max(400, chartData.length * 100)
 
 	// Providers that actually appear in data
 	const activeProviders = useMemo(() => {
@@ -655,6 +655,8 @@ export function ComparisonChart({ recommendation, role, roleId }: ComparisonChar
 									<BarChart
 										data={chartData}
 										layout="vertical"
+										barCategoryGap="30%"
+										barGap={4}
 										margin={{ top: 5, right: 30, left: 10, bottom: 5 }}>
 										<XAxis
 											type="number"
@@ -692,28 +694,28 @@ export function ComparisonChart({ recommendation, role, roleId }: ComparisonChar
 											}
 											fill={DIMENSION_COLORS.composite}
 											radius={[0, 4, 4, 0]}
-											barSize={12}
+											barSize={10}
 										/>
 										<Bar
 											dataKey="success"
 											name="Success Rate"
 											fill={DIMENSION_COLORS.success}
 											radius={[0, 4, 4, 0]}
-											barSize={12}
+											barSize={10}
 										/>
 										<Bar
 											dataKey="costEfficiency"
 											name="Cost Efficiency"
 											fill={DIMENSION_COLORS.cost}
 											radius={[0, 4, 4, 0]}
-											barSize={12}
+											barSize={10}
 										/>
 										<Bar
 											dataKey="speed"
 											name="Speed"
 											fill={DIMENSION_COLORS.speed}
 											radius={[0, 4, 4, 0]}
-											barSize={12}
+											barSize={10}
 										/>
 									</BarChart>
 								</ResponsiveContainer>