From c770505021b0a3334340203be7495b09e286bcd0 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Wed, 17 Jul 2024 22:08:31 +0200
Subject: [PATCH] Fix height calculation of app layout components

The height of the app bar was lost after opening and closing the reader because ref was already created but its current value changed.
However, the ResizeObserver was still observing the old element.

Updated other hook usages, which might cause the same issue, as well
---
 src/components/navbar/DefaultNavBar.tsx              | 2 +-
 src/components/navbar/navigation/DesktopSideBar.tsx  | 2 +-
 src/components/navbar/navigation/MobileBottomBar.tsx | 2 +-
 src/components/tabs/TabsMenu.tsx                     | 2 +-
 src/screens/Browse.tsx                               | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/navbar/DefaultNavBar.tsx b/src/components/navbar/DefaultNavBar.tsx
index f3a818da..bf752343 100644
--- a/src/components/navbar/DefaultNavBar.tsx
+++ b/src/components/navbar/DefaultNavBar.tsx
@@ -87,7 +87,7 @@ export function DefaultNavBar() {
     const appBarRef = useRef<HTMLDivElement | null>(null);
     useResizeObserver(
         appBarRef,
-        useCallback(() => setAppBarHeight(appBarRef.current?.clientHeight ?? 0), [appBarRef]),
+        useCallback(() => setAppBarHeight(appBarRef.current?.clientHeight ?? 0), [appBarRef.current]),
     );
     useEffect(() => setAppBarHeight(0), []);
 
diff --git a/src/components/navbar/navigation/DesktopSideBar.tsx b/src/components/navbar/navigation/DesktopSideBar.tsx
index 7258e3bc..fc0bcb6e 100644
--- a/src/components/navbar/navigation/DesktopSideBar.tsx
+++ b/src/components/navbar/navigation/DesktopSideBar.tsx
@@ -90,7 +90,7 @@ export const DesktopSideBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) =
     const ref = useRef<HTMLDivElement | null>(null);
     useResizeObserver(
         ref,
-        useCallback(() => setNavBarWidth(ref.current?.clientWidth ?? 0), [ref]),
+        useCallback(() => setNavBarWidth(ref.current?.clientWidth ?? 0), [ref.current]),
     );
     useEffect(() => () => setNavBarWidth(0), []);
 
diff --git a/src/components/navbar/navigation/MobileBottomBar.tsx b/src/components/navbar/navigation/MobileBottomBar.tsx
index 54375b6e..4c9e388a 100644
--- a/src/components/navbar/navigation/MobileBottomBar.tsx
+++ b/src/components/navbar/navigation/MobileBottomBar.tsx
@@ -25,7 +25,7 @@ export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] })
     const ref = useRef<HTMLDivElement | null>(null);
     useResizeObserver(
         ref,
-        useCallback(() => setBottomBarHeight(ref.current?.clientHeight ?? 0), [ref]),
+        useCallback(() => setBottomBarHeight(ref.current?.clientHeight ?? 0), [ref.current]),
     );
     useEffect(() => () => setBottomBarHeight(0), []);
 
diff --git a/src/components/tabs/TabsMenu.tsx b/src/components/tabs/TabsMenu.tsx
index 3f30119c..86e51cf7 100644
--- a/src/components/tabs/TabsMenu.tsx
+++ b/src/components/tabs/TabsMenu.tsx
@@ -37,7 +37,7 @@ export const TabsMenu = forwardRef(
         const [width, setWidth] = useState<number>();
         useResizeObserver(
             tabsMenuRef,
-            useCallback(() => setWidth(tabsMenuRef.current?.clientWidth), [tabsMenuRef]),
+            useCallback(() => setWidth(tabsMenuRef.current?.clientWidth), [tabsMenuRef.current]),
         );
 
         // Visual Hack: 160px is min-width for viewport width of >600
diff --git a/src/screens/Browse.tsx b/src/screens/Browse.tsx
index 369e00f8..8a1b6a64 100644
--- a/src/screens/Browse.tsx
+++ b/src/screens/Browse.tsx
@@ -26,7 +26,7 @@ export function Browse() {
     const [tabsMenuHeight, setTabsMenuHeight] = useState(0);
     useResizeObserver(
         tabsMenuRef,
-        useCallback(() => setTabsMenuHeight(tabsMenuRef.current!.offsetHeight), [tabsMenuRef]),
+        useCallback(() => setTabsMenuHeight(tabsMenuRef.current!.offsetHeight), [tabsMenuRef.current]),
     );
 
     const [tabNum, setTabNum] = useState<number>(0);