Een tegel leek uitgelijnd en vier niet, en dat lag aan waar de tekst begon

De sparkline is precies even hoog als het vak dat stat-sub reserveert, dus die
raakte de onderrand. Een regel tekst in datzelfde vak begon bovenaan en liet er
leegte onder. Vandaar dat de reactietijd uitgelijnd oogde en de rest niet.

Opgelost met grid plus align-items: end, en niet met flex: dan blijft de tekst
een gewoon blok dat afbreekt zoals het hoort, ook de mono-variant met een lange
domeinnaam erin.

De hoogte van de bovenste rij is niet verder vergroot. Dat was de andere weg naar
hetzelfde beeld en die wilde de gebruiker uitdrukkelijk niet.

De chevron van het instelkader staat links voor de titel in plaats van rechts aan
de rand, en kleurt mee bij hover zoals het menu rechtsboven. Links is waar het
driehoekje van de browser ook gestaan zou hebben, en het staat bij het woord waar
het iets over zegt.

De zelfcontrole is op het apparaat bevestigd: Answering, handdruk in 10 ms.
Daarmee klopte de verklaring uit 0.0.18 en is open punt 5 helemaal rond.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Harmen
2026-08-27 16:14:19 +02:00
co-authored by Claude Opus 5
parent 498b0fe695
commit 628c20c494
4 changed files with 73 additions and 17 deletions
+34 -7
View File
@@ -238,8 +238,20 @@ body {
.stat-sub.mono { font-family: var(--font-mono); overflow-wrap: anywhere; }
/* Even hoog als de sparkline hieronder, en met dezelfde bovenmarge. Anders staat
het getal van "Backend response" hoger dan de andere twee, want daar hangt een
grafiekje onder in plaats van een regel tekst. */
.stat-sub { font-size: 0.75rem; color: var(--text-sec); margin-top: 0.5rem; min-height: 34px; }
grafiekje onder in plaats van een regel tekst.
De tekst staat onderin dat vak en niet bovenin (27-08-2026). Dat was het
verschil dat de gebruiker zag: de sparkline is precies 34 pixels hoog en raakt
dus de onderrand, terwijl een regel tekst van 34 pixels ruimte bovenaan begon
en er leegte onder overliet. Nu liggen ze op dezelfde lijn.
Met grid en niet met flex: de tekst blijft dan een gewoon blok en breekt af
zoals hij hoort, ook de mono-variant met lange domeinnamen. */
.stat-sub {
font-size: 0.75rem; color: var(--text-sec);
margin-top: 0.5rem; min-height: 34px;
display: grid; align-items: end;
}
/* ── Badges ─────────────────────────────────────────────────────────────── */
/* Zonder stip, op verzoek van de gebruiker (20-08-2026). De kleur van de badge
@@ -513,13 +525,28 @@ body {
.setup > summary::-webkit-details-marker { display: none; }
.setup > summary::marker { content: ''; }
/* Een chevron die meedraait, want zonder het driehoekje van de browser is er
verder niets dat zegt dat dit open kan. */
.setup > summary::after {
content: ''; margin-left: auto; width: 0.5rem; height: 0.5rem;
verder niets dat zegt dat dit open kan.
Links vóór de titel (27-08-2026, gebruiker). Hij stond rechts aan de rand, en
dat is ver weg van het woord waar hij iets over zegt; links staat hij waar het
driehoekje van de browser ook gestaan zou hebben.
Dicht wijst hij naar rechts, open naar beneden. align-self houdt hem op de
hoogte van de titel, want de regel eromheen lijnt op de basislijn uit en een
gedraaid vierkantje heeft er geen. */
.setup > summary::before {
content: ''; align-self: center; flex-shrink: 0;
width: 0.5rem; height: 0.5rem;
border-right: 2px solid var(--text-sec); border-bottom: 2px solid var(--text-sec);
transform: rotate(45deg); transition: transform 0.2s var(--ease-out);
transform: rotate(-45deg);
transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.setup[open] > summary::after { transform: rotate(-135deg); }
.setup[open] > summary::before { transform: rotate(45deg); }
/* Accent bij hover, net als het menu rechtsboven: dit zijn de twee dingen op deze
pagina die opengaan als je erop klikt, en dan horen ze zich hetzelfde te
gedragen. */
.setup > summary:hover { color: var(--accent); }
.setup > summary:hover::before { border-color: var(--accent); }
.setup-form { min-width: 0; }
.setup-value {
display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;