Improve mobile responsiveness - touch targets, better grids, smaller screens

resources/views/videos/index.blade.php

@@ -286,3 +286,35 @@ document.addEventListener('touchend', function(e) {
 </script>
 @endsection
 
+
+    <!-- Extra Mobile Styles -->
+    <style>
+        @media (max-width: 400px) {
+            .yt-video-grid {
+                gap: 12px;
+            }
+            .yt-video-thumb {
+                border-radius: 8px;
+            }
+            .yt-video-info {
+                gap: 8px;
+                margin-top: 8px;
+            }
+            .yt-channel-icon {
+                width: 28px;
+                height: 28px;
+            }
+            .yt-video-title {
+                font-size: 13px;
+            }
+            .yt-channel-name, .yt-video-meta {
+                font-size: 11px;
+            }
+            .search-info {
+                padding: 12px;
+            }
+            .search-info h2 {
+                font-size: 16px;
+            }
+        }
+    </style>