fix: globalBodyWidth

tolgee · Jan 27, 2025 · 357fe56 · 357fe56
1 parent 0e19d7c
commit 357fe56
Showing 1 changed file with 4 additions and 11 deletions.
diff --git a/webapp/src/globalContext/useLayoutService.ts b/webapp/src/globalContext/useLayoutService.ts
@@ -1,5 +1,5 @@
-import { useRef, useState } from 'react';
-import { useResizeObserver } from 'usehooks-ts';
+import { useState } from 'react';
+import { useWindowSize } from 'usehooks-ts';
 import type { useQuickStartGuideService } from './useQuickStartGuideService';
 
 export const TOP_BAR_HEIGHT = 52;
@@ -14,18 +14,11 @@ export const useLayoutService = ({ quickStart }: Props) => {
   const [topBannerHeight, setTopBannerHeight] = useState(0);
   const [topSubBannerHeight, setTopSubBannerHeight] = useState(0);
   const [topBarHidden, setTopBarHidden] = useState(false);
-  const [bodyWidth, setBodyWidth] = useState(document.body.offsetWidth);
+  const viewPortSize = useWindowSize();
   const [rightPanelFloatingForced, setRightPanelFloatingForced] =
     useState(false);
 
-  const bodyRef = useRef(document.body);
-
-  useResizeObserver({
-    ref: bodyRef,
-    onResize(size) {
-      Promise.resolve(() => setBodyWidth(size.width!));
-    },
-  });
+  const bodyWidth = viewPortSize.width;
 
   const rightPanelShouldFloat = bodyWidth < 1200 || rightPanelFloatingForced;