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>

resources/views/videos/show.blade.php

@@ -492,3 +492,33 @@
         });
     </script>
 @endsection
+
+    <!-- Extra Mobile Styles -->
+    <style>
+        @media (max-width: 400px) {
+            .video-layout-container {
+                padding: 0 !important;
+            }
+            .video-title {
+                font-size: 15px !important;
+                padding: 0 4px;
+            }
+            .video-stats-left {
+                font-size: 12px;
+            }
+            .video-description-box {
+                margin: 12px 4px;
+                padding: 10px !important;
+            }
+            .comments-section {
+                margin-top: 16px;
+                padding: 12px 4px;
+            }
+            .comment-form {
+                flex-direction: column;
+            }
+            .comment-form > img {
+                display: none;
+            }
+        }
+    </style>