From 81597c3bb2572c76a1b657b0aecdd4f07e066dfc Mon Sep 17 00:00:00 2001
From: Simon <simon.huenecke@gmail.com>
Date: Mon, 9 Feb 2026 22:08:28 +0000
Subject: [PATCH] correct video element order

---
 frontend/css/style.css | 15 +++++++++------
 frontend/js/videos.js  | 30 ++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/frontend/css/style.css b/frontend/css/style.css
index c293b74..9d61029 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -769,8 +769,11 @@ body.theme-light .setting-item select option {
 
 /* Grid Container */
 .grid-container {
-    column-width: 260px;
-    column-gap: 16px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    grid-auto-rows: 10px;
+    gap: 16px;
+    align-items: start;
     padding: 24px;
     max-width: var(--grid-max);
     margin: 0 auto;
@@ -778,8 +781,9 @@ body.theme-light .setting-item select option {
 
 @media (max-width: 768px) {
     .grid-container {
-        column-width: 160px;
-        column-gap: 12px;
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        grid-auto-rows: 10px;
+        gap: 12px;
         padding: 16px;
     }
 
@@ -882,8 +886,7 @@ body.theme-light .setting-item select option {
     border: 1px solid var(--border);
     box-shadow: 0 6px 16px var(--shadow);
     position: relative;
-    break-inside: avoid;
-    margin-bottom: 16px;
+    margin-bottom: 0;
 }
 
 .video-card:hover {
diff --git a/frontend/js/videos.js b/frontend/js/videos.js
index a8508d4..218d4ae 100644
--- a/frontend/js/videos.js
+++ b/frontend/js/videos.js
@@ -140,6 +140,9 @@ App.videos = App.videos || {};
             `;
             const thumb = card.querySelector('img');
             App.videos.attachNoReferrerRetry(thumb);
+            if (thumb) {
+                thumb.addEventListener('load', App.videos.scheduleMasonryLayout);
+            }
             const favoriteBtn = card.querySelector('.favorite-btn');
             if (favoriteBtn && favoriteKey) {
                 App.favorites.setButtonState(favoriteBtn, favoritesSet.has(favoriteKey));
@@ -185,6 +188,7 @@ App.videos = App.videos || {};
             state.renderedVideoIds.add(v.id);
         });
 
+        App.videos.scheduleMasonryLayout();
         App.videos.ensureViewportFilled();
     };
 
@@ -229,6 +233,32 @@ App.videos = App.videos || {};
         }
     };
 
+    let masonryRaf = null;
+    App.videos.scheduleMasonryLayout = function() {
+        if (masonryRaf) {
+            cancelAnimationFrame(masonryRaf);
+        }
+        masonryRaf = requestAnimationFrame(() => {
+            masonryRaf = null;
+            App.videos.applyMasonryLayout();
+        });
+    };
+
+    App.videos.applyMasonryLayout = function() {
+        const grid = document.getElementById('video-grid');
+        if (!grid) return;
+        const styles = window.getComputedStyle(grid);
+        if (styles.display !== 'grid') return;
+        const rowHeight = parseInt(styles.getPropertyValue('grid-auto-rows'), 10);
+        const rowGap = parseInt(styles.getPropertyValue('row-gap') || styles.getPropertyValue('gap'), 10) || 0;
+        if (!rowHeight) return;
+        Array.from(grid.children).forEach((item) => {
+            const itemHeight = item.getBoundingClientRect().height;
+            const span = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap));
+            item.style.gridRowEnd = `span ${span}`;
+        });
+    };
+
     App.videos.updateLoadMoreState = function() {
         const loadMoreBtn = document.getElementById('load-more-btn');
         if (!loadMoreBtn) return;