101101 overscroll-behavior : contain;
102102 }
103103
104+ /* Desktop: Sidebar fixed, main content scrolls independently */
105+ @media (min-width : 768px ) {
106+ # mainSidebar {
107+ position : fixed;
108+ top : 0 ;
109+ left : 0 ;
110+ height : 100dvh ;
111+ overflow-y : auto;
112+ }
113+ main {
114+ position : fixed;
115+ top : 0 ;
116+ right : 0 ;
117+ left : 288px ; /* w-72 = 18rem = 288px */
118+ height : 100dvh ;
119+ overflow-y : auto;
120+ }
121+ }
122+
104123 /* High-contrast text selection to avoid blending with blue OS highlight */
105124 ::selection {
106125 background : rgba (59 , 130 , 246 , 0.35 ); /* blue-500 @ 35% */
161180 </ style >
162181</ head >
163182
164- < body class ="min-h-screen text-slate-200 font-sans antialiased overflow-x-hidden flex flex-col md:flex-row ">
183+ < body class ="min-h-screen text-slate-200 font-sans antialiased overflow-x-hidden ">
165184
166185 <!-- Mobile Header -->
167186 < div id ="mobileHeader "
@@ -180,7 +199,7 @@ <h1 class="font-bold text-xl text-white">Watchly</h1>
180199 < div id ="mobileNavBackdrop " class ="fixed inset-0 bg-black/50 z-30 hidden md:hidden "> </ div >
181200 <!-- Sidebar Navigation -->
182201 < aside id ="mainSidebar "
183- class ="fixed inset-y-0 left-0 z-40 w-72 transform -translate-x-full transition-transform duration-300 ease-out bg-neutral-950/50 backdrop-blur-xl border-b md:border-b-0 md:border-r border-slate-800 flex flex-col flex-shrink-0 md:relative md: translate-x-0 md:flex pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] ">
202+ class ="fixed inset-y-0 left-0 z-40 w-72 transform -translate-x-full transition-transform duration-300 ease-out bg-neutral-950/50 backdrop-blur-xl border-b md:border-b-0 md:border-r border-slate-800 flex flex-col flex-shrink-0 md:translate-x-0 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] ">
184203 < div class ="p-6 md:p-8 flex-col items-start gap-4 hidden md:flex ">
185204 < div class ="flex items-center gap-3 ">
186205 < img src ="/app/static/logo.png " alt ="Watchly "
@@ -304,7 +323,8 @@ <h1 class="font-bold text-2xl text-transparent bg-clip-text bg-gradient-to-r fro
304323 </ aside >
305324
306325 <!-- Main Content Area -->
307- < main class ="flex-grow min-h-[100dvh] overflow-y-auto relative no-scrollbar ">
326+ < main
327+ class ="min-h-[100dvh] md:fixed md:inset-y-0 md:right-0 md:left-72 overflow-y-auto relative no-scrollbar pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] ">
308328 < div class ="max-w-2xl mx-auto px-4 py-8 md:py-16 pb-[calc(env(safe-area-inset-bottom)+8rem)] ">
309329
310330 < form id ="configForm ">
0 commit comments