Fix responsiveness issue with screen width resizing on dashboard and coaching session pages and their layouts

Author: jhodapp

src/app/coaching-sessions/[id]/layout.tsx

@@ -18,11 +18,11 @@ export default function CoachingSessionLayout({
 }>) {
   return (
     <SidebarProvider>
-      <div className="flex min-h-screen min-w-full">
+      <div className="flex min-h-screen w-full">
         <AppSidebar />
-        <SidebarInset>
+        <SidebarInset className="min-w-0">
           <SiteHeader />
-          <main>{children}</main>
+          <main className="min-w-0">{children}</main>
         </SidebarInset>
       </div>
     </SidebarProvider>

src/app/dashboard/layout.tsx

@@ -19,11 +19,11 @@ export default function DashboardLayout({
 }>) {
   return (
     <SidebarProvider>
-      <div className="flex min-h-screen min-w-full">
+      <div className="flex min-h-screen w-full">
         <AppSidebar />
-        <SidebarInset>
+        <SidebarInset className="min-w-0">
           <SiteHeader />
-          <main className="flex-1 p-6">{children}</main>
+          <main className="flex-1 p-6 min-w-0">{children}</main>
           <Toaster />
         </SidebarInset>
       </div>

src/components/ui/page-container.tsx

@@ -14,9 +14,9 @@ export function PageContainer({
         "p-4",
         // Mobile: stack vertically
         "flex flex-col gap-6",
-        // Never grow wider than the site-header
-        "max-w-screen-2xl",
-        // Ensure full width for children
+        // Constrain width to a reasonable maximum while allowing flexibility
+        "w-full max-w-screen-2xl mx-auto",
+        // Ensure children respect the container width
         "[&>*]:w-full"
       )}
     >

src/components/ui/site-header.tsx

@@ -7,8 +7,8 @@ import { UserNav } from "@/components/ui/user-nav";
 
 export function SiteHeader() {
   return (
-    <header className="sticky top-0 z-50 w-full max-w-screen-2xl border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="flex h-14 pl-4 pt-2 max-w-screen-2xl items-start">
+    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="flex h-14 pl-4 pt-2 w-full max-w-screen-2xl mx-auto items-start">
         <MainNav />
         <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
           {/* <div className="w-full flex-1 md:w-auto md:flex-none">