fix(notes): rullebjælken svævede midt i arket

Det er `.page`, der ruller — og det var også `.page`, der blev smallere for at
holde linjelængden nede. Så bjælken fulgte med ind til tekstsøjlens kant og stod
med en håndflade tom rude til højre for sig, en tredjedel inde i ruden.

Grænsen sættes som polstring i stedet for som bredde. Elementet er lige så bredt
som ruden — bjælken bliver ved kanten, hvor den hører til — og teksten er
nøjagtig lige så bred som før. `max()` mod nul, fordi en smal rude ellers ville få
negativ polstring, og `border-box` er sat globalt, så bredden er hele boksen og
ikke boksen plus polstringen; uden det ville det give en vandret rullebjælke.

Kildevisningen deler `.page` med editoren og havde samme fejl. Den følger med.

Målt: elementet slutter nu på rudens indholdskant i stedet for 74 px inde, og
`scrollWidth - clientWidth` er nul.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Kristian Wind
2026-08-20 14:57:15 +02:00
co-authored by Claude Opus 5
parent 6b4448b245
commit 8ecefbbdc2
+13 -1
View File
@@ -884,8 +884,20 @@
* clamp frem for et tal: en smal rude får det hele, en bred får en
* linjelængde, øjet kan finde tilbage i. Øvre grænse omkring 68rem, hvor en
* linje er lang nok til at rumme en kommando og kort nok til at læse. */
max-width: clamp(38rem, 92%, 68rem);
/* Grænsen sættes som polstring og ikke som bredde, og det er rullebjælken,
* der afgør det.
*
* Det er *dette* element, der ruller. Var det også det, der blev smallere,
* fulgte rullebjælken med ind: den stod ved tekstsøjlens kant med en
* håndflade tom rude til højre for sig og svævede midt i arket. Med
* polstring er elementet lige så bredt som ruden — bjælken bliver ved
* kanten, hvor den hører til — og teksten er nøjagtig lige så bred som før.
*
* `max()` mod nul, fordi en smal rude ellers ville få negativ polstring, og
* `border-box` er sat globalt, så bredden er hele boksen og ikke boksen plus
* polstringen. Uden det ville det her give en vandret rullebjælke. */
width: 100%;
padding-right: max(0px, calc(100% - clamp(38rem, 92%, 68rem)));
}
.hidden {