correct video element order

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;