fix(ui): reserve scrollbar gutter in public TOC so it doesn't overlay text

This commit is contained in:
Pontoporeia
2026-09-18 16:26:36 +02:00
parent fc66b37801
commit bdde7173ea
2 changed files with 11 additions and 0 deletions
+3
View File
@@ -7,6 +7,9 @@
- [x] #cover-home-lazy-intersect-fix [!high] Fix lazy covers not loading after initial images. Root cause: home grid scrolls inside <main class="home-main"> (overflow-y:auto, body height:100vh flex), but htmx `revealed` listens to window scroll only — so below-fold covers never revealed. Fix: hx-trigger="intersect threshold:0.05 once" (IntersectionObserver works inside any scroll container). VERIFIED LIVE: progressive scroll loads covers 5→11→15→20→22/22 (before: stuck ~5). Committed fix(home): use intersect trigger.
- [x] #cover-image-webp-avif-serve-lite [!medium] Serve lightweight webp cover thumbnails instead of full-res PNG originals (~99% on worst cases). DONE VERIFIED LIVE 2026-08-31: `cwebp -resize 800 q80` sidecars (+ GD fallback for CMYK JPEGs) generated by ThesisFileHandler at upload (FilePond + legacy); /cover-fragment emits <picture> (webp source + original fallback); backfill scripts/generate-cover-webp.php + `just deploy-cover-webp`. PROD: tools installed (docs), 46/46 covers backfilled (44 cwebp + 2 GD/CMYK), app code deployed, /cover-fragment + /media?path=*.webp verified 200 image/webp 61KB (vs 15.8MB orig). AVIF dropped (no viable prod resize; WEBP sufficient). NOTE: just deploy-code's final nginx/permissions step needs sudo password (operational, pre-existing — not a regression).
## In Progress
- [x] #fix-toc-scrollbar-overlap-content-pages Fix TOC scrollbar overlapping text on about/charte/licence pages (desktop sticky sidebar). Root cause: `.toc` scroll container (overflow-y:auto, 180px col) had no right gutter, so native scrollbar sat on top of link text. Fix: padding-right (not margin) on the `.toc` scroll container + matching padding on summary.
## Pending
- [x] #home-htmx-lazy-cover-images [!medium] Add htmx lazyloading on home page cover images: `revealed`-triggered cover-fragment endpoint, swap-in `<img>`, settle fade CSS, load htmx on home