From ec0932c5d234cf61f6c879dbf91b05e13a1eba43 Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Wed, 30 Sep 2026 15:11:56 +0200 Subject: [PATCH] fix(ui): unify fonts and prevent footer text clipping --- apps/web/package.json | 2 -- .../applications/components/insights-view.tsx | 17 +++++++++---- apps/web/src/features/homepage/footer.tsx | 4 ++-- apps/web/src/features/homepage/landing.css | 8 +++---- apps/web/src/features/homepage/page.tsx | 2 +- apps/web/src/features/homepage/sheet.tsx | 8 +++---- apps/web/src/features/homepage/ui.tsx | 4 ++-- packages/ui/package.json | 1 - packages/ui/src/styles/globals.css | 12 ++++++---- pnpm-lock.yaml | 24 ------------------- 10 files changed, 32 insertions(+), 50 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index 49d672db3..2e5dfe84b 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -32,8 +32,6 @@ "@dnd-kit/core": "^6.3.1", "@dnd-kit/sortable": "^10.0.0", "@dnd-kit/utilities": "^3.2.2", - "@fontsource-variable/anybody": "^5.3.0", - "@fontsource-variable/martian-mono": "^5.3.0", "@lezer/highlight": "^1.2.5", "@lingui/core": "^6.8.0", "@lingui/react": "^6.8.0", diff --git a/apps/web/src/features/applications/components/insights-view.tsx b/apps/web/src/features/applications/components/insights-view.tsx index 462274cf9..39d509915 100644 --- a/apps/web/src/features/applications/components/insights-view.tsx +++ b/apps/web/src/features/applications/components/insights-view.tsx @@ -199,7 +199,7 @@ export function ApplicationInsights({ applications }: { applications: Applicatio const FLOW_COLORS = ["#a5b4fc", "#818cf8", "#22d3ee", "#fbbf24", "#34d399"]; const FLOW_BG = "#0a0a0f"; const FLOW_REJECTED = "#fb7185"; -const FLOW_FONT = '"Hanken Grotesk Variable", "Hanken Grotesk", ui-sans-serif, sans-serif'; +const FLOW_FONT = "var(--font-ui)"; // RxR mark ~18px wide in the 256-unit icon viewBox (the mark's glyphs span y ≈ 36–220). const ICON_SCALE = 18 / 256; @@ -211,10 +211,16 @@ function toBase64(buffer: ArrayBuffer): string { } // A rasterized SVG (loaded as an ) can't reach the page's webfonts, so the exported PNG falls -// back to a system font unless the font is inlined. Find the Hanken Grotesk woff2 the app already +// back to a system font unless the font is inlined. Find the UI woff2 the app already // loaded (basic-latin subset covers the chart's English labels), base64 it, and return an // @font-face the export SVG can embed. Returns null on any failure so export still proceeds. async function uiFontFace(): Promise { + const uiFamily = getComputedStyle(document.documentElement) + .getPropertyValue("--font-ui") + .split(",")[0] + ?.trim() + .replace(/["']/g, ""); + if (!uiFamily) return null; for (const sheet of Array.from(document.styleSheets)) { let rules: CSSRuleList | undefined; try { @@ -225,7 +231,7 @@ async function uiFontFace(): Promise { for (const rule of Array.from(rules ?? [])) { if (!(rule instanceof CSSFontFaceRule)) continue; const family = rule.style.getPropertyValue("font-family").replace(/["']/g, ""); - if (!family.includes("Hanken Grotesk")) continue; + if (family !== uiFamily) continue; if ((rule.style.getPropertyValue("font-style") || "normal") !== "normal") continue; // Keep only the basic-latin subset (covers the chart's English labels). CSSOM normalizes // its range to "U+0-FF" — i.e. "U+" then all-zero start — so match that, not "U+0000". @@ -237,7 +243,7 @@ async function uiFontFace(): Promise { const res = await fetch(url); if (!res.ok) return null; const buffer = await res.arrayBuffer(); - return `@font-face{font-family:"Hanken Grotesk Variable";font-style:normal;font-weight:100 900;src:url(data:font/woff2;base64,${toBase64(buffer)}) format("woff2");}`; + return `@font-face{font-family:"${family}";font-style:normal;font-weight:${rule.style.getPropertyValue("font-weight")};src:url(data:font/woff2;base64,${toBase64(buffer)}) format("woff2");}`; } catch { return null; } @@ -273,8 +279,9 @@ function PipelineFlow({ insights }: { insights: ReturnType("[data-export-only]")) el.style.display = ""; - // Inline the UI font so the rasterized PNG renders in Hanken Grotesk, not a system fallback. + // Inline the UI font so the rasterized PNG uses the same type as the app. const fontFace = await uiFontFace(); if (fontFace) { const styleEl = document.createElementNS("http://www.w3.org/2000/svg", "style"); diff --git a/apps/web/src/features/homepage/footer.tsx b/apps/web/src/features/homepage/footer.tsx index b09dbc673..73199008f 100644 --- a/apps/web/src/features/homepage/footer.tsx +++ b/apps/web/src/features/homepage/footer.tsx @@ -126,8 +126,8 @@ export function LandingFooter() { {/* It fades in by sliding up out of the mask's faded bottom; an opacity fade would fail contrast checks. */}