The panel's webfonts, in the one position CSS accepts them

The lockup was the visible symptom and the wrong suspect. Matching it to the Web
App's component changed nothing a reader would notice, because the panel was not
rendering Archivo at all — it was rendering system-ui's italic bold, which is a
different letterform at the same size, and had been since the stylesheet was
written.

The Google Fonts @import sat after @import "tailwindcss". Tailwind v4 inlines
its import into the rules it generates, so anything importing after it is no
longer at the top of the sheet, and CSS drops an @import that follows real
rules. The built stylesheet carried zero occurrences of fonts.googleapis.com;
the build had been saying so on every run, in a warning easy to read as noise
about a comment. Moving the font import above Tailwind's is the whole fix, and
the Web App's own stylesheet has always had that order with a comment explaining
it — that comment comes across, plus what it cost here.

This was never only the wordmark. Every rule reaching for --font-sans or
--font-mono was falling back too, which is the entire panel: the section nav,
the card titles, and the endpoint tables whose monospace is how a path reads as
a path. Checked against the built bundle rather than the dev server, since the
dev pipeline is exactly what was hiding it: the page now reports Archivo italic
800 loaded, and the wordmark measures 115.05px — the same width the Web App's
rail lockup measures.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
tajniak81
2026-08-30 18:17:09 +02:00
co-authored by Claude Opus 5
parent e648634ce1
commit a49d48f659
5 changed files with 10 additions and 6 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#2563eb" />
<title>DriverVault · API Server</title>
<script type="module" crossorigin src="/assets/index-BjBOfjar.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-nQWOOvsA.css">
<script type="module" crossorigin src="/assets/index-CvY2-bIX.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-C26jpIre.css">
</head>
<body>
<div id="app"></div>