moving styling and views to be more consistent and for gallery view to be less cumbersome.

app/static/js/showcase.js

@@ -97,10 +97,28 @@
   }
 
   function checkScrollPosition() {
-    const scrollBottom = window.innerHeight + window.scrollY;
-    const docHeight = document.documentElement.scrollHeight;
+    // For masonry layouts, we need to check if the SHORTEST column is near the viewport bottom,
+    // not the overall page bottom. Otherwise, a tall image in one column prevents loading
+    // even when other columns have empty space visible.
 
-    if (docHeight - scrollBottom < SCROLL_THRESHOLD) {
+    // First, update accurate column heights
+    updateColumnHeights();
+
+    // Find the shortest column's bottom position relative to viewport
+    const shortestColumnIndex = getShortestColumnIndex();
+    const shortestColumn = columns[shortestColumnIndex];
+    if (!shortestColumn) return;
+
+    const columnRect = shortestColumn.getBoundingClientRect();
+    const columnBottom = columnRect.bottom;  // Distance from viewport top to column bottom
+    const viewportHeight = window.innerHeight;
+
+    // If the shortest column's bottom is within SCROLL_THRESHOLD of the viewport bottom, load more
+    // columnBottom - viewportHeight = how far below the viewport the column extends
+    // If this is negative or small, the column end is visible or nearly visible
+    const distanceFromViewportBottom = columnBottom - viewportHeight;
+
+    if (distanceFromViewportBottom < SCROLL_THRESHOLD) {
       loadMore();
     }
   }