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";
}