Make home more responsive depending on screen width

resources/js/responsive.js

@@ -0,0 +1,68 @@
+function updateGrid(grid) {
+    // Skip hidden grids
+    if (grid.offsetParent === null) {
+        return;
+    }
+
+    const items = [...grid.querySelectorAll('.episode-item')];
+
+    if (!items.length) {
+        return;
+    }
+
+    // Reset visibility first
+    items.forEach(item => {
+        item.style.display = '';
+    });
+
+    // Determine actual column count
+    const firstTop = items[0].offsetTop;
+
+    let columns = 0;
+
+    for (const item of items) {
+        if (item.offsetTop !== firstTop) {
+            break;
+        }
+
+        columns++;
+    }
+
+    const rows = parseInt(grid.dataset.rows || '2', 10);
+
+    const visibleItems = columns * rows;
+
+    items.forEach((item, index) => {
+        item.style.display = index < visibleItems
+            ? ''
+            : 'none';
+    });
+}
+
+function updateAllEpisodeGrids() {
+    document.querySelectorAll('.episode-grid').forEach(updateGrid);
+}
+
+const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            updateGrid(entry.target);
+        }
+    });
+});
+
+document.querySelectorAll('.episode-grid').forEach(grid => {
+    observer.observe(grid);
+});
+
+let resizeTimeout;
+
+window.addEventListener('resize', () => {
+    clearTimeout(resizeTimeout);
+
+    resizeTimeout = setTimeout(() => {
+        updateAllEpisodeGrids();
+    }, 100);
+});
+
+window.addEventListener('load', updateAllEpisodeGrids);

resources/views/home/index.blade.php

@@ -28,4 +28,6 @@
     <div class="mx-auto pt-6 sm:px-6 lg:px-8 space-y-6 max-w-[100%] xl:max-w-[95%] 2xl:max-w-[85%] pb-2">
         @include('home.partials.comments')
     </div>
+
+    @vite(['resources/js/responsive.js'])
 </x-app-layout>

resources/views/home/partials/tab/template.blade.php

@@ -5,12 +5,16 @@
         ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6'
         : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-8';
 
-    $limit = $isThumbnail ? 12 : 16;
+    // Render enough items for largest possible layout
+    $limit = 24;
 
     $view = $isThumbnail ? 'thumbnail' : 'poster';
 @endphp
 
-<div class="grid {{ $gridClasses }}">
+<div
+    class="episode-grid grid {{ $gridClasses }}"
+    data-rows="2"
+>
     @foreach ($episodes->take($limit) as $ep)
         @php
             $episode = isset($popularView)
@@ -18,9 +22,11 @@
                 : $ep;
         @endphp
 
-        <x-episode-cover
-            :episode="$episode"
-            :view="$view"
-        />
+        <div class="episode-item">
+            <x-episode-cover
+                :episode="$episode"
+                :view="$view"
+            />
+        </div>
     @endforeach
 </div>

vite.config.js

@@ -21,6 +21,7 @@ export default defineConfig({
                 'resources/js/admin-edit.js',
                 'resources/js/admin-subtitles.js',
                 'resources/js/preview.js',
+                'resources/js/responsive.js',
                 'resources/js/stats.js'
             ],
             refresh: true,