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

hooks/use-mobile.ts

@@ -8,13 +8,22 @@ export function useIsMobile() {
   );
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    const checkMobile = () => {
+      const mobile = window.innerWidth < MOBILE_BREAKPOINT;
+      setIsMobile((prev) => {
+        // Éviter les re-renders inutiles si la valeur n'a pas changé
+        if (prev === mobile) return prev;
+        return mobile;
+      });
     };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
+
+    // Vérification initiale
+    checkMobile();
+
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    mql.addEventListener("change", checkMobile);
+    
+    return () => mql.removeEventListener("change", checkMobile);
   }, []);
 
   return !!isMobile;