Fix scrolling issue

apps/web/src/app/(dashboard)/layout.tsx

@@ -59,8 +59,8 @@ export default async function AuthenticatedDashboardLayout({
 
   return (
     <NextAuthProvider session={session}>
-      <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-        <div className="hidden  bg-muted/20 md:block">
+      <div className="flex min-h-screen w-full h-full">
+        <div className="hidden bg-muted/20 md:block md:w-[280px]">
           <div className="flex h-full max-h-screen flex-col gap-2">
             <div className="flex h-14 items-center px-4 lg:h-[60px] lg:px-6">
               <Link href="/" className="flex items-center gap-2 font-semibold">
@@ -115,7 +115,7 @@ export default async function AuthenticatedDashboardLayout({
             <div className="mt-auto p-4"></div>
           </div>
         </div>
-        <div className="flex flex-col">
+        <div className="flex flex-1 flex-col">
           <header className="flex h-14 items-center gap-4 md:hidden  bg-muted/20 px-4 lg:h-[60px] lg:px-6">
             <Sheet>
               <SheetTrigger asChild>
@@ -197,8 +197,10 @@ export default async function AuthenticatedDashboardLayout({
               </DropdownMenuContent>
             </DropdownMenu>
           </header>
-          <main className="flex flex-1 flex-col gap-4 p-4 w-full lg:max-w-6xl mx-auto lg:gap-6 lg:p-6">
-            {children}
+          <main className="flex-1 overflow-y-auto h-full">
+            <div className="flex flex-col gap-4 p-4 w-full lg:max-w-6xl mx-auto lg:gap-6 lg:p-6">
+              {children}
+            </div>
           </main>
         </div>
       </div>

packages/ui/styles/globals.css

@@ -71,6 +71,9 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground h-full;
+  }
+  html {
+    @apply h-full;
   }
 }