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

2026-03-03 18:51:53 +03:00
1 parent a28023c29b
commit 1888f77886
@@ -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>