mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-13 14:32:03 +00:00
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:
1 parent
70c1077121
commit
67135b2ce8
2 files changed
+14
-6
No files matched your search
+10
-2
@@ -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";
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user