Use CSS classes to hide n-th elements instead of JS

resources/js/responsive.js

@@ -1,68 +0,0 @@
-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,6 +28,4 @@
     <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/random.blade.php

@@ -4,10 +4,10 @@
 
 @php 
     $random = \cache()->remember('random_home', 300, function () {
-        return \App\Models\Episode::inRandomOrder()->limit(7)->get(); ;
+        return \App\Models\Episode::inRandomOrder()->limit(16)->get(); ;
     });
 @endphp
 
 <div class="mb-6">
-    @include('home.partials.tab.template', ['episodes' => $random, 'isThumbnail' => false, 'rowsCount' => 1])
+    @include('home.partials.tab.template', ['episodes' => $random, 'isThumbnail' => false])
 </div>

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

@@ -1,23 +1,34 @@
-@props([
-    'isThumbnail',
-    'rowsCount' => 2,
-])
+@props(['isThumbnail'])
 
 @php
-    $gridClasses = $isThumbnail
-        ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4'
-        : 'grid-cols-2 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 3xl:grid-cols-7';
-
     // Render enough items for largest possible layout
-    $limit = 24;
+    $limit = 16;
 
     $view = $isThumbnail ? 'thumbnail' : 'poster';
 @endphp
 
+@if ($isThumbnail)
 <div
-    class="episode-grid grid {{ $gridClasses }}"
-    data-rows="{{ $rowsCount }}"
+  class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5
+         [&>.episode-item]:hidden
+         [&>.episode-item:nth-child(-n+8)]:block
+         md:[&>.episode-item:nth-child(-n+8)]:block
+         lg:[&>.episode-item:nth-child(-n+9)]:block
+         xl:[&>.episode-item:nth-child(-n+9)]:block
+         2xl:[&>.episode-item:nth-child(-n+12)]:block
+         3xl:[&>.episode-item:nth-child(-n+15)]:block"
 >
+@else
+<div
+  class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-8
+         [&>.episode-item]:hidden
+         [&>.episode-item:nth-child(-n+12)]:block
+         md:[&>.episode-item:nth-child(-n+12)]:block
+         xl:[&>.episode-item:nth-child(-n+12)]:block
+         2xl:[&>.episode-item:nth-child(-n+15)]:block
+         3xl:[&>.episode-item:nth-child(-n+16)]:block"
+>
+@endif
     @foreach ($episodes->take($limit) as $ep)
         @php
             $episode = isset($popularView)