Changeset 77019fa in Klonkt

Timestamp:

08/20/2026 10:24:40 AM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

96a99bf

Parents:

22d2dba5

Message:

Reader: the last post snaps too

Its top used to be unreachable — too little page below it to bring it to
the top edge (measured: snap point 2548, max scroll 2356) — so the
browser fell back to the nearest reachable position, the bottom. The
previous answer was to drop its snap point; this is the real one: the
LAST post gets a full screen height, which makes that top exactly
reachable (shorter posts grow to fit, taller ones already were). Costs
nothing visually — posts have no frame, only a separator above.

lvh, not svh: with a disappearing address bar the visible screen is
sometimes the large viewport, and svh would fall just short.

Co-Authored-By: Claude Fable 5 <noreply@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• assets/js/mod/read.js (modified) (1 diff)
• views/shell.ejs (modified) (2 diffs)

src/assets/css/style.css

@@ -2544 +2544 @@
     scroll-margin-top: 2rem;
 }
-/* Het laatste bericht krijgt geen snappunt: zijn bovenkant is niet te bereiken
-   (er zit te weinig pagina onder), en de browser snapt dan naar de dichtstbij-
-   zijnde bereikbare positie -- de bodem. Gemeten: snappunt 2548, maxScroll 2356. */
-.feed-reader .read-post:last-child .read-anker { scroll-snap-align: none; }
+/* HET LAATSTE BERICHT SNAPT OOK (Robin, 21-8). Dat kon eerst niet: zijn
+   bovenkant was onbereikbaar -- er zat te weinig pagina onder om hem naar de
+   bovenrand te brengen (gemeten: snappunt 2548, maxScroll 2356), en de browser
+   viel dan terug op de dichtstbijzijnde bereikbare positie: de bodem. Het
+   snappunt weghalen was de vorige oplossing; dit is de echte.
+   Een volle schermhoogte op het LAATSTE bericht maakt die bovenkant precies
+   bereikbaar. Korter dan het scherm: het bericht wordt even hoog en het snappunt
+   valt exact op maxScroll. Langer dan het scherm: dan was het al haalbaar en
+   doet min-height niets.
+   100lvh en niet 100svh: op een telefoon met een verdwijnende adresbalk is het
+   zichtbare scherm soms de GROTE viewport, en dan komt svh net tekort.
+   Zichtbaar kost dit niets: berichten hebben geen kader, alleen een scheidings-
+   lijn erboven, dus het laatste bericht krijgt hooguit witruimte eronder. */
+.feed-reader .read-post:last-child { min-height: 100lvh; }
 
 /* ELK BERICHT EEN EIGEN SCHERM, als de site dat wil (Instellingen -> Weergave).

src/assets/js/mod/read.js

@@ -392 +392 @@
     easing: (t) => 1 - Math.pow(1 - t, 4),
   });
-  // Het snappunt is de bovenkant van elk bericht. Het laatste doet niet mee:
-  // zijn bovenkant is niet te bereiken, er zit te weinig pagina onder.
+  // Het snappunt is de bovenkant van elk bericht -- ook van het laatste. Dat
+  // deed eerder niet mee omdat zijn bovenkant onbereikbaar was; sinds het
+  // laatste bericht in CSS een volle schermhoogte krijgt, kan hij wel.
   const berichten = [...document.querySelectorAll('.feed-reader .read-post')];
-  berichten.slice(0, -1).forEach((a) => snap.addElement(a, { align: 'start' }));
+  berichten.forEach((a) => snap.addElement(a, { align: 'start' }));
 
   // ALLEEN VOORUIT VANGEN. Dit hoort bij de ruime zone hierboven en is niet

src/views/shell.ejs

@@ -222 +222 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=103">
+<link rel="stylesheet" href="/assets/css/style.css?v=104">
 <script>
 /* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in
@@ -505 +505 @@
   // Eén nummer voor de hele map. Te vaak bumpen kost één download; te weinig
   // bumpen kost een bugfix die nooit aankomt.
-  var MOD_V = 46;
+  var MOD_V = 47;
 
   // name -> 1 (aan het laden) of de module-namespace (geladen). Een module