mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +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";
|
||||
}
|
||||
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in new issue
Block a user