also remove video from the dom

frontend/js/feed.js

@@ -422,14 +422,16 @@ App.feed = App.feed || {};
         if (r < 0) return;
         const prevActive = state.feedActiveIndex;
 
+        // Drop the failed clip's feed slide element from the DOM, then its JSON
+        // from the queue, then re-key the remaining rendered slides.
         removeSlide(r);
         videos.splice(r, 1);
         reindexAfterRemoval(r);
 
-        // Keep the grid's parallel index-based virtualization in sync with the
-        // now-shorter queue.
-        if (App.virtualGrid && typeof App.virtualGrid.relayout === 'function') {
-            App.virtualGrid.relayout();
+        // Remove the failed clip's grid card element from the DOM too (the grid
+        // shares the queue) and re-pack the remaining cards.
+        if (App.virtualGrid && typeof App.virtualGrid.removeVideo === 'function') {
+            App.virtualGrid.removeVideo(videoId);
         }
 
         if (videos.length === 0) {

frontend/js/videos.js

@@ -814,7 +814,19 @@ App.videos = App.videos || {};
             if (el) { el.innerHTML = ''; el.style.height = '0px'; }
         };
 
-        return { ensureInit, packFrom, update: scheduleUpdate, relayout, reset };
+        // Removes a single video's card from the grid: its DOM element is
+        // unmounted directly (so it's gone even if the re-pack below can't run),
+        // then the remaining cards are re-packed against the now-shorter queue.
+        // The caller must have already removed the video from state.loadedVideos.
+        const removeVideo = function(videoId) {
+            const id = String(videoId);
+            mounted.forEach((card, i) => {
+                if (card.dataset.videoId === id) unmount(i);
+            });
+            relayout();
+        };
+
+        return { ensureInit, packFrom, update: scheduleUpdate, relayout, removeVideo, reset };
     })();
 
     App.videos.updateLoadMoreState = function() {