From c1d3cf5f3dd24a10170c2a23e3e8f483478c4a32 Mon Sep 17 00:00:00 2001
From: Camille Moussu <cmoussu@linagora.com>
Date: Mon, 30 Mar 2026 10:35:18 +0200
Subject: [PATCH] new hook to handle size using mui hook usemediaquery

---
 src/useScreenSizeDetection.ts | 41 +++++++----------------------------
 1 file changed, 8 insertions(+), 33 deletions(-)

diff --git a/src/useScreenSizeDetection.ts b/src/useScreenSizeDetection.ts
index 0adc63e..954dcf5 100644
--- a/src/useScreenSizeDetection.ts
+++ b/src/useScreenSizeDetection.ts
@@ -1,38 +1,13 @@
-import { useState, useEffect } from "react";
-
-export const DEVICES_SCREEN_LIMITS = {
-  tablet: 925,
-  mobile: 450,
-} as const;
-
-function useWindowWidth(): number {
-  const [width, setWidth] = useState(() => window.innerWidth);
-
-  useEffect(() => {
-    let rafId: number | null = null;
-
-    const onResize = () => {
-      if (rafId !== null) cancelAnimationFrame(rafId);
-      rafId = requestAnimationFrame(() => setWidth(window.innerWidth));
-    };
-
-    window.addEventListener("resize", onResize);
-    return () => {
-      window.removeEventListener("resize", onResize);
-      if (rafId !== null) cancelAnimationFrame(rafId);
-    };
-  }, []);
-
-  return width;
-}
+import { useMediaQuery, useTheme } from '@linagora/twake-mui'
 
 export function useScreenSizeDetection() {
-  const width = useWindowWidth();
+  const theme = useTheme()
+
+  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'))
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
 
   return {
-    isTooSmall: width <= DEVICES_SCREEN_LIMITS.mobile,
-    isTablet:
-      width <= DEVICES_SCREEN_LIMITS.tablet &&
-      width > DEVICES_SCREEN_LIMITS.mobile,
-  };
+    isTooSmall: isMobile,
+    isTablet: !isMobile && !isDesktop
+  }
 }