crossfade

2026-08-01 15:58:19 +02:00
parent 0d5dbbc61f
commit 17cf8df109
16 changed files with 258 additions and 51 deletions
@@ -388,7 +388,18 @@

 	// Minimal gutters on narrow screens so the plot uses nearly the full width
 	// (just enough to keep the axis tick labels legible).
-	let isNarrow = $derived(width > 0 && width < 520);
+	// Compact gutters (small axis padding, short icon rows) apply to phones AND
+	// tablets: below `lg` the page is edge-to-edge, so wide desktop-style axis
+	// margins would waste most of the width. Desktop keeps its roomier metrics.
+	let belowDesktop = $state(false);
+	onMount(() => {
+		const mq = window.matchMedia('(max-width: 1023px)');
+		const apply = () => (belowDesktop = mq.matches);
+		apply();
+		mq.addEventListener('change', apply);
+		return () => mq.removeEventListener('change', apply);
+	});
+	let isNarrow = $derived(belowDesktop || (width > 0 && width < 520));
 	let padLeft = $derived(isNarrow ? 26 : 60);
 	// Reserve the right gutter when this chart (or a sibling, via reserveRightAxis)
 	// has a right axis, so a stacked row of charts share the same plot width. On