Fix more responsiveness issues

resources/views/home/partials/comments.blade.php

@@ -55,10 +55,9 @@
                     >
 
                     {{-- Resolution Badge --}}
-                    <span
+                    <div class="absolute right-2 top-2 rounded-lg bg-black/70 px-2 py-1 text-[11px] font-semibold tracking-wide text-white ring-1 ring-white/10">
-                        class="absolute right-0 top-0 rounded-bl-lg bg-rose-700/70 px-3 py-1 text-xs font-semibold text-white shadow-lg backdrop-blur">
                         {{ $resolution }}
-                    </span>
+                    </div>
 
                     {{-- Gradient Overlay --}}
                     <div

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(8)->get(); ;
+        return \App\Models\Episode::inRandomOrder()->limit(7)->get(); ;
     });
 @endphp
 
 <div class="mb-6">
-    @include('home.partials.tab.template', ['episodes' => $random, 'showThumbnails' => false])
+    @include('home.partials.tab.template', ['episodes' => $random, 'isThumbnail' => false, 'rowsCount' => 1])
 </div>

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

@@ -1,9 +1,12 @@
-@php
+@props([
-    $isThumbnail = $showThumbnails;
+    'isThumbnail',
+    'rowsCount' => 2,
+])
 
+@php
     $gridClasses = $isThumbnail
-        ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6'
+        ? '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-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-8';
+        : 'grid-cols-1 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;
@@ -13,7 +16,7 @@
 
 <div
     class="episode-grid grid {{ $gridClasses }}"
-    data-rows="2"
+    data-rows="{{ $rowsCount }}"
 >
     @foreach ($episodes->take($limit) as $ep)
         @php
@@ -22,7 +25,7 @@
                 : $ep;
         @endphp
 
-        <div class="episode-item">
+        <div class="episode-item p-1">
             <x-episode-cover
                 :episode="$episode"
                 :view="$view"

resources/views/home/partials/tabs-middle.blade.php

@@ -34,11 +34,11 @@
     </li>
 </ul>
 
-@php $showThumbnails = true; @endphp
+@php $isThumbnail = true; @endphp
 
 @auth
     @if (!Auth::user()->home_middle_design)
-        @php $showThumbnails = false; @endphp
+        @php $isThumbnail = false; @endphp
     @endif
 @endauth
 
@@ -48,7 +48,7 @@
         id="tabs-most-views" role="tabpanel" aria-labelledby="tabs-most-views-tab" data-te-tab-active>
         @include('home.partials.tab.template', [
             'episodes' => $popularAllTime,
-            'showThumbnails' => $showThumbnails,
+            'isThumbnail' => $isThumbnail,
         ])
         <div class="grid text-center pt-5 ">
             <a href="{{ route('hentai.search', ['order' => 'view-count']) }}"
@@ -61,7 +61,7 @@
         id="tabs-most-likes" role="tabpanel" aria-labelledby="tabs-most-likes-tab">
         @include('home.partials.tab.template', [
             'episodes' => $mostLikes,
-            'showThumbnails' => $showThumbnails,
+            'isThumbnail' => $isThumbnail,
         ])
         <div class="grid text-center pt-5 ">
             <a href="{{ route('hentai.search', ['order' => 'view-count']) }}"
@@ -74,7 +74,7 @@
         id="tabs-popular-weekly" role="tabpanel" aria-labelledby="tabs-popular-weekly-tab">
         @include('home.partials.tab.template', [
             'episodes' => $popularWeekly,
-            'showThumbnails' => $showThumbnails,
+            'isThumbnail' => $isThumbnail,
             'popularView' => true,
         ])
         <div class="grid text-center pt-5 ">
@@ -88,7 +88,7 @@
         id="tabs-popular-monthly" role="tabpanel" aria-labelledby="tabs-popular-monthly-tab">
         @include('home.partials.tab.template', [
             'episodes' => $popularMonthly,
-            'showThumbnails' => $showThumbnails,
+            'isThumbnail' => $isThumbnail,
             'popularView' => true,
         ])
         <div class="grid text-center pt-5 ">

resources/views/home/partials/tabs-top.blade.php

@@ -21,18 +21,18 @@
 
 </ul>
 
-@php $showThumbnails = false; @endphp
+@php $isThumbnail = false; @endphp
 
 @auth
 @if(Auth::user()->home_top_design)
-    @php $showThumbnails = true; @endphp
+    @php $isThumbnail = true; @endphp
 @endif
 @endauth
 
 <!--Tabs content-->
 <div class="mb-6">
     <div class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block" id="tabs-recently-uploaded" role="tabpanel" aria-labelledby="tabs-recently-uploaded-tab" data-te-tab-active>
-        @include('home.partials.tab.template', ['episodes' => $recentlyUploaded, 'showThumbnails' => $showThumbnails])
+        @include('home.partials.tab.template', ['episodes' => $recentlyUploaded, 'isThumbnail' => $isThumbnail])
         <div class="grid text-center pt-5 ">
             <a href="{{ route('hentai.search', ['order' => 'recently-uploaded']) }}"
                 class="rounded bg-rose-600 p-1 mr-2 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
@@ -41,7 +41,7 @@
         </div>
     </div>
     <div class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block" id="tabs-recently-released" role="tabpanel"aria-labelledby="tabs-recently-released-tab">
-        @include('home.partials.tab.template', ['episodes' => $recentlyReleased, 'showThumbnails' => $showThumbnails])
+        @include('home.partials.tab.template', ['episodes' => $recentlyReleased, 'isThumbnail' => $isThumbnail])
         <div class="grid text-center pt-5 ">
             <a href="{{ route('hentai.search', ['order' => 'recently-released']) }}"
                 class="rounded bg-rose-600 p-1 mr-2 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
@@ -50,7 +50,7 @@
         </div>
     </div>
     <div class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block" id="tabs-trending" role="tabpanel"aria-labelledby="tabs-trending-tab">
-        @include('home.partials.tab.template', ['episodes' => $popularDaily, 'showThumbnails' => $showThumbnails, 'popularView' => true])
+        @include('home.partials.tab.template', ['episodes' => $popularDaily, 'isThumbnail' => $isThumbnail, 'popularView' => true])
         <div class="grid text-center pt-5 ">
             <a href="{{ route('hentai.search', ['order' => 'recently-released']) }}"
                 class="rounded invisible bg-rose-600 p-1 mr-2 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">

tailwind.config.js

@@ -18,6 +18,25 @@ export default {
                 sans: ['Figtree', ...defaultTheme.fontFamily.sans],
             },
         },
+
+            screens: {
+            'sm': '640px',
+            // => @media (min-width: 640px) { ... }
+
+            'md': '768px',
+            // => @media (min-width: 768px) { ... }
+
+            'lg': '1024px',
+            // => @media (min-width: 1024px) { ... }
+
+            'xl': '1280px',
+            // => @media (min-width: 1280px) { ... }
+
+            '2xl': '1536px',
+            // => @media (min-width: 1536px) { ... }
+
+            '3xl': '1900px',
+        }
     },
 
     plugins: [forms, require("tw-elements/dist/plugin")],