From 67135b2ce88cead2204c4ae38ea7fa17b019f177 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Thu, 22 Oct 2026 21:35:01 +0200 Subject: [PATCH] fix(charts): measure chart text in the app font again Recharts measures every label in a span the chart runtime parks under , beside , and the host copies body's classes to pick up the app font. With next/font/google the font stack variable came from one of those classes; since Inter is self-hosted, globals.css sets --font-sans on body itself, so the host outside it measured in the default font and every tick was sized for text the chart did not draw. The rule now sets the stack on the measurement host too, and the dashboard's strings measure the same inside the host as under again. --- src/app/globals.css | 12 ++++++++++-- src/components/charts/text-measurement-host.ts | 8 ++++---- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index acbebfa58..ab29b8f34 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -47,8 +47,16 @@ size-adjust: 107.12%; } -/* On body, where the next/font variable class used to set it. */ -body { +/* + * On body, where the next/font variable class used to set it, and on the + * chart text-measurement host, which sits under beside + * (`src/components/charts/text-measurement-host.ts`). The host copies body's + * classes to measure in the app font; the variable class used to be one of + * them, so without this rule the host fell back to the default font and + * every axis label was sized in a font the chart did not draw in. + */ +body, +[data-slot="chart-text-measurement-host"] { --font-sans: "Inter", "Inter Fallback"; } diff --git a/src/components/charts/text-measurement-host.ts b/src/components/charts/text-measurement-host.ts index f27bc2332..aab28735e 100644 --- a/src/components/charts/text-measurement-host.ts +++ b/src/components/charts/text-measurement-host.ts @@ -17,10 +17,10 @@ * ``, inside a `contain: strict` box, costs about 0.01 ms. * * So the span lives under ``, next to ``, inside a zero-size - * contained host. The host copies ``'s class list, which is where the - * app font is set (`--font-sans` + `font-sans`), so every string measures in - * the same font at the same size as before and the charts lay out exactly as - * they did. + * contained host. The host copies ``'s class list (`font-sans`), and + * `globals.css` defines the `--font-sans` stack on the host as on ``, + * so every string measures in the same font at the same size as before and + * the charts lay out exactly as they did. */ export const RECHARTS_MEASUREMENT_SPAN_ID = "recharts_measurement_span";