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

resources/views/user/channel.blade.php

@@ -694,3 +694,43 @@ document.querySelectorAll('.pagination a').forEach(function(link) {
 </script>
 @endsection
 
+
+    <!-- Extra Mobile Styles -->
+    <style>
+        @media (max-width: 480px) {
+            .channel-header {
+                padding: 16px;
+                text-align: center;
+            }
+            .channel-avatar {
+                width: 80px;
+                height: 80px;
+            }
+            .channel-name {
+                font-size: 18px;
+            }
+            .channel-stats {
+                justify-content: center;
+                gap: 16px;
+            }
+            .channel-stat-value {
+                font-size: 16px;
+            }
+            .yt-video-grid {
+                gap: 16px;
+            }
+            .yt-video-thumb {
+                border-radius: 8px;
+            }
+            .yt-video-info {
+                margin-top: 8px;
+            }
+            .yt-channel-icon {
+                width: 28px;
+                height: 28px;
+            }
+            .yt-video-title {
+                font-size: 13px;
+            }
+        }
+    </style>