diff --git a/frontend/src/components/discovery/MasonryGrid.vue b/frontend/src/components/discovery/MasonryGrid.vue index f90a5ce..436b8e9 100644 --- a/frontend/src/components/discovery/MasonryGrid.vue +++ b/frontend/src/components/discovery/MasonryGrid.vue @@ -79,9 +79,18 @@ function aspectStyle(item) { return { aspectRatio: `${w} / ${h}` } } +// Larger rootMargin than the composable default (600px) because the +// sentinel sits at the BOTTOM of the masonry container, whose height is +// the MAX of the column heights. A single tall image (long manga page, +// panorama) in one column pushes the sentinel way past the visible +// bottom of the SHORTER columns — the user reads the short-column +// bottoms long before the sentinel comes into view, and load-more +// fires too late. 2400px ≈ 2-3 screen-heights of pre-emptive trigger, +// comfortably covering typical tall-image heights. Operator-flagged +// 2026-05-30. useInfiniteScroll(sentinelEl, () => { if (props.hasMore && !props.loading) emit('load-more') -}) +}, { rootMargin: '2400px' })