From da4061041f3dab8bd5d69008709958f3f9b2136f Mon Sep 17 00:00:00 2001
From: Khoa Vo <vndangkhoa@gmail.com>
Date: Thu, 14 May 2026 19:41:33 +0700
Subject: [PATCH] fix: mobile sidebar properly hidden by CSS specificity, watch
 page fits viewport

---
 frontend/app/globals.css               | 5 ++---
 frontend/app/watch/ClientWatchPage.tsx | 4 +++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 1090fef..d5b0ea1 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -270,9 +270,8 @@
 }
 
 @media (max-width: 768px) {
-  .yt-sidebar-mini {
-    display: none;
-  }
+  .yt-sidebar-mini,
+  .yt-sidebar-mini.sidebar-open { display: none !important; }
 }
 
 .yt-main-content {
diff --git a/frontend/app/watch/ClientWatchPage.tsx b/frontend/app/watch/ClientWatchPage.tsx
index ea61f45..03bb9ca 100644
--- a/frontend/app/watch/ClientWatchPage.tsx
+++ b/frontend/app/watch/ClientWatchPage.tsx
@@ -780,11 +780,13 @@ export default function ClientWatchPage() {
         }}>
             <div className="watch-page-container" style={{ 
                 maxWidth: wideMode ? '100%' : '1800px', 
+                width: '100%',
                 margin: '0 auto',
                 padding: '24px',
                 display: 'grid',
                 gridTemplateColumns: wideMode ? '1fr' : '1fr 400px',
                 gap: '24px',
+                boxSizing: 'border-box',
             }}>
                 {/* Main Content */}
                 <div className="watch-main">
@@ -1058,7 +1060,7 @@ export default function ClientWatchPage() {
                 
                 @media (max-width: 768px) {
                     .watch-page-container {
-                        padding: 12px !important;
+                        padding: 8px !important;
                     }
                 }
             `}</style>