Media pager: up and down go from post to post, left and right along a post's pictures. Adam: swipes and arrows up/down should go to the next post's media, left/right to the next within a post. The pager is now posts stacked top to bottom, each a row of its pictures or clips side by side — a quoted post's join the post that quotes it — with dots along the top when a post has more than one, saying how many and which. Up and down (swipe, arrows, j/k, Page) move a post at a time and land on a post where its row was left; left and right (swipe, arrows, h/l) move within the post and stop at its ends. A post's pictures all load as it comes near (those along its row too); a clip's head start goes to the next post's (where its row rests), the next along this one, and the post after next, at half; the look-ahead (the feed paging on, the media crawl) counts posts. Pictures pan sideways as well as up and down at 1×. Tests find the slide on screen by where it sits (the pager's children are posts now); feed-picture-pager walks right within a post, down past one with none, back up to where a post was left, left to its first, and a sideways swipe next to a swipe up; quote-pager walks the quoting post's row (its own picture, then the quote's).

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01KPw21NEpWeTGu6swVASmBt

1 files changed, 19 insertions, 2 deletions

diff --git a/src/style.css b/src/style.css
index e03ff14..f908a05 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1482,14 +1482,31 @@ body::after {
   overflow-anchor: none;
 }
 .mp-scroll::-webkit-scrollbar { display: none; }
-.mp-slide {
+/* a post: a screen tall, its pictures or clips in a row side by side */
+.mp-group {
   position: relative; height: 100vh; height: 100dvh; width: 100%;
   scroll-snap-align: start; scroll-snap-stop: always;
+}
+.mp-row {
+  display: flex; height: 100%; width: 100%; overflow-x: auto; overflow-y: hidden;
+  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
+}
+.mp-row::-webkit-scrollbar { display: none; }
+.mp-slide {
+  position: relative; flex: 0 0 100%; height: 100%; width: 100%;
+  scroll-snap-align: start; scroll-snap-stop: always;
   display: flex; align-items: center; justify-content: center; overflow: hidden;
 }
+/* how many in this post, and which: dots along the top */
+.mp-dots {
+  position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top)) + 16px);
+  display: flex; gap: 6px; z-index: 2; pointer-events: none;
+}
+.mp-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .38); box-shadow: 0 0 3px rgba(0, 0, 0, .5); transition: background .15s, transform .15s; }
+.mp-dots i.on { background: #fff; transform: scale(1.15); }
 .mp-media { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-select: none; }
 /* a picture pinches to zoom (attachZoom); one finger at 1× is the pager's swipe */
-.mp-slide img.mp-media { touch-action: pan-y; transform-origin: center center; will-change: transform; }
+.mp-slide img.mp-media { touch-action: pan-x pan-y; transform-origin: center center; will-change: transform; }
 /* nothing but the picture until a tap */
 .mp-meta, .mp-top { opacity: 0; pointer-events: none; transition: opacity .18s; }
 .media-pager.show .mp-meta, .media-pager.show .mp-top { opacity: 1; pointer-events: auto; }