fix(charts): measure chart text in the app font again

Recharts measures every label in a span the chart runtime parks under
<html>, beside <body>, 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 <body> again.
This commit is contained in:
Marc-André Bombeck committed 2026-10-22 21:35:01 +02:00
1 parent 70c1077121
commit 67135b2ce8
2 files changed
+14 -6

No files matched your search

+10 -2
View File
@@ -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 <html> beside <body>
* (`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";
}
@@ -17,10 +17,10 @@
* `<body>`, inside a `contain: strict` box, costs about 0.01 ms.
*
* So the span lives under `<html>`, next to `<body>`, inside a zero-size
* contained host. The host copies `<body>`'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 `<body>`'s class list (`font-sans`), and
* `globals.css` defines the `--font-sans` stack on the host as on `<body>`,
* 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";