feat: enhance responsive design and layout consistency across various components, including dashboard, statistics, and rules pages

components/layout/page-layout.tsx

@@ -1,20 +1,25 @@
 "use client";
 
 import { Sidebar } from "@/components/dashboard/sidebar";
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
+import { SidebarContext } from "@/components/layout/sidebar-context";
 
 interface PageLayoutProps {
   children: ReactNode;
 }
 
 export function PageLayout({ children }: PageLayoutProps) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
   return (
-    <div className="flex h-screen bg-background">
-      <Sidebar />
-      <main className="flex-1 overflow-auto">
-        <div className="p-6 space-y-6">{children}</div>
-      </main>
-    </div>
+    <SidebarContext.Provider value={{ open: sidebarOpen, setOpen: setSidebarOpen }}>
+      <div className="flex h-screen bg-background overflow-hidden">
+        <Sidebar open={sidebarOpen} onOpenChange={setSidebarOpen} />
+        <main className="flex-1 overflow-auto overflow-x-hidden">
+          <div className="p-4 md:p-6 space-y-4 md:space-y-6 max-w-full">{children}</div>
+        </main>
+      </div>
+    </SidebarContext.Provider>
   );
 }