From 1888f7788638e058221d85817ea03118861040bd Mon Sep 17 00:00:00 2001
From: ghassan <ghassan@innovator.bh>
Date: Tue, 3 Mar 2026 18:51:53 +0300
Subject: [PATCH] Improve mobile responsiveness - touch targets, better grids,
 smaller screens

---
 resources/views/layouts/app.blade.php  | 131 +++++++++++++++++++++++++
 resources/views/user/channel.blade.php |  40 ++++++++
 resources/views/videos/index.blade.php |  32 ++++++
 resources/views/videos/show.blade.php  |  30 ++++++
 4 files changed, 233 insertions(+)

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index ee9fcdc..d53642f 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -677,3 +677,134 @@
     @yield('scripts')
 </body>
 </html>
+
+    <!-- Extra Mobile Responsive Styles -->
+    <style>
+        /* Touch-friendly improvements */
+        @media (max-width: 480px) {
+            /* Better touch targets */
+            .yt-menu-btn, .yt-icon-btn, .yt-mobile-search-toggle {
+                min-width: 44px;
+                min-height: 44px;
+            }
+            
+            /* Reduce padding on main content */
+            .yt-main {
+                padding: 12px 8px !important;
+            }
+            
+            /* Smaller video title */
+            .yt-video-title, .video-title {
+                font-size: 14px !important;
+            }
+            
+            /* Channel info compact */
+            .channel-info {
+                gap: 8px !important;
+            }
+            .channel-avatar {
+                width: 32px !important;
+                height: 32px !important;
+            }
+            .channel-name {
+                font-size: 14px !important;
+            }
+            .channel-subs {
+                font-size: 12px !important;
+            }
+            
+            /* Video meta smaller */
+            .yt-channel-name, .yt-video-meta {
+                font-size: 12px !important;
+            }
+            
+            /* Action buttons horizontal scroll on mobile */
+            .video-actions {
+                overflow-x: auto;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 8px;
+                width: 100%;
+            }
+            
+            .yt-action-btn {
+                flex-shrink: 0;
+                padding: 8px 12px;
+                font-size: 13px;
+            }
+            
+            /* Comment improvements */
+            .comment-item {
+                flex-direction: column;
+            }
+            .comment-item > img {
+                width: 32px !important;
+                height: 32px !important;
+            }
+            
+            /* Search input mobile */
+            .yt-search-input {
+                font-size: 14px;
+                padding: 0 12px;
+            }
+            
+            /* Header spacing */
+            .yt-header {
+                padding: 0 8px;
+            }
+            
+            /* User dropdown full width on mobile */
+            .dropdown-menu {
+                width: 100%;
+                min-width: 200px;
+            }
+        }
+        
+        /* Very small screens */
+        @media (max-width: 360px) {
+            .yt-main {
+                padding: 8px 4px !important;
+            }
+            
+            .yt-header-right .yt-icon-btn:not(:first-child) {
+                display: none;
+            }
+        }
+        
+        /* Landscape mobile */
+        @media (max-height: 500px) and (orientation: landscape) {
+            .yt-sidebar {
+                width: 200px;
+            }
+            .yt-video-grid {
+                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            }
+        }
+        
+        /* Prevent horizontal scroll */
+        body {
+            overflow-x: hidden;
+            max-width: 100vw;
+        }
+        
+        /* Better video player on mobile */
+        @media (max-width: 768px) {
+            .video-container {
+                border-radius: 0 !important;
+                margin: 0 -16px !important;
+                max-width: calc(100% + 32px) !important;
+            }
+        }
+        
+        /* Sidebar link padding for touch */
+        @media (hover: none) {
+            .yt-sidebar-link {
+                padding: 0 16px;
+            }
+            .yt-sidebar-link:hover {
+                background: transparent;
+            }
+            .yt-sidebar-link:active {
+                background: var(--border-color);
+            }
+        }
+    </style>
diff --git a/resources/views/user/channel.blade.php b/resources/views/user/channel.blade.php
index cf7fc8c..80f5246 100644
--- a/resources/views/user/channel.blade.php
+++ b/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>
diff --git a/resources/views/videos/index.blade.php b/resources/views/videos/index.blade.php
index 06a18d4..dd65722 100644
--- a/resources/views/videos/index.blade.php
+++ b/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>
diff --git a/resources/views/videos/show.blade.php b/resources/views/videos/show.blade.php
index ff2ca11..5a6fc8b 100644
--- a/resources/views/videos/show.blade.php
+++ b/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>