From a42075eb57e394b79119d787f680e1fb398af3cf Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Tue, 13 Jan 2026 11:39:19 +0100
Subject: [PATCH] char consistency layout

---
 .../lib/components/ConcurrentJobsChart.svelte   |  3 ++-
 frontend/src/lib/components/RunChart.svelte     | 17 +++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/ConcurrentJobsChart.svelte b/frontend/src/lib/components/ConcurrentJobsChart.svelte
index de67c50290..d9d976bdb5 100644
--- a/frontend/src/lib/components/ConcurrentJobsChart.svelte
+++ b/frontend/src/lib/components/ConcurrentJobsChart.svelte
@@ -235,7 +235,8 @@
 					display: false
 				},
 				min: minMaxTimes.min,
-				max: minMaxTimes.max
+				max: minMaxTimes.max,
+				ticks: { maxRotation: 0, minRotation: 0 }
 			},
 			y: {
 				grid: {
diff --git a/frontend/src/lib/components/RunChart.svelte b/frontend/src/lib/components/RunChart.svelte
index 72b616cbba..73216c8284 100644
--- a/frontend/src/lib/components/RunChart.svelte
+++ b/frontend/src/lib/components/RunChart.svelte
@@ -12,7 +12,8 @@
 		LinearScale,
 		PointElement,
 		TimeScale,
-		LogarithmicScale
+		LogarithmicScale,
+		type ChartOptions
 	} from 'chart.js'
 	import type { CompletedJob } from '$lib/gen'
 	import { getDbClockNow } from '$lib/forLater'
@@ -244,7 +245,7 @@
 
 	const minMaxTime = $derived.by(() => computeMinMaxTime(jobs, minTimeSet, maxTimeSet))
 
-	let scatterOptions = $derived({
+	let scatterOptions: ChartOptions<'scatter'> = $derived({
 		responsive: true,
 		maintainAspectRatio: false,
 		plugins: {
@@ -274,8 +275,9 @@
 				grid: {
 					display: false
 				},
-				min: minMaxTime.minTime,
-				max: minMaxTime.maxTime
+				min: minMaxTime.minTime.getTime(),
+				max: minMaxTime.maxTime.getTime(),
+				ticks: { maxRotation: 0, minRotation: 0 }
 			},
 			y: {
 				grid: {
@@ -285,11 +287,14 @@
 					display: true,
 					text: 'job duration (ms)'
 				},
-				type: 'logarithmic'
+				type: 'logarithmic',
+				afterFit: function (axis) {
+					axis.width = Math.max(axis.width, 65) // min width to prevent layout flickering
+				}
 			}
 		},
 		animation: false
-	} as any)
+	})
 </script>
 
 <DarkModeObserver bind:darkMode />