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

components/layout/page-header.tsx

@@ -1,6 +1,11 @@
 "use client";
 
 import { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+import { Menu } from "lucide-react";
+import { useSidebarContext } from "@/components/layout/sidebar-context";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
 
 interface PageHeaderProps {
   title: string;
@@ -15,16 +20,39 @@ export function PageHeader({
   actions,
   rightContent,
 }: PageHeaderProps) {
+  const { setOpen } = useSidebarContext();
+  const isMobile = useIsMobile();
+
   return (
-    <div className="flex items-center justify-between">
-      <div>
-        <h1 className="text-2xl font-bold text-foreground">{title}</h1>
-        {description && (
-          <div className="text-muted-foreground">{description}</div>
+    <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+      <div className="flex items-center gap-3">
+        {isMobile && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setOpen(true)}
+            className="shrink-0"
+          >
+            <Menu className="w-5 h-5" />
+          </Button>
         )}
+        <div>
+          <h1 className="text-lg md:text-2xl font-bold text-foreground">{title}</h1>
+          {description && (
+            <div className="text-xs md:text-base text-muted-foreground mt-1">{description}</div>
+          )}
+        </div>
       </div>
-      {rightContent}
-      {actions && <div className="flex gap-2">{actions}</div>}
+      {(rightContent || actions) && (
+        <div className="flex items-center gap-2 flex-wrap">
+          {rightContent}
+          {actions && (
+            <div className={cn("flex gap-2", isMobile && "flex-wrap")}>
+              {actions}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }