fixes from the PR comments

src/components/Icons/ExitFullscreenIcon/ExitFullscreenIcon.tsx

@@ -11,7 +11,7 @@ export const ExitFullscreenIcon = LsdIcon(
       {...props}
     >
       <path
-        fill={props.fill || 'white'}
+        fill="white"
         d="M 8 19 L 8 16 L 5 16 L 5 14 L 10 14 L 10 19 Z M 14 19 L 14 14 L 19 14 L 19 16 L 16 16 L 16 19 Z M 5 10 L 5 8 L 8 8 L 8 5 L 10 5 L 10 10 Z M 14 10 L 14 5 L 16 5 L 16 8 L 19 8 L 19 10 Z M 14 10 "
       />
     </svg>

src/components/Icons/FullscreenIcon/FullscreenIcon.tsx

@@ -12,7 +12,7 @@ export const FullscreenIcon = LsdIcon(
     >
       <path
         d="M4 18C4 19.1 4.9 20 6 20H10V18H6V14H4V18ZM20 6C20 4.9 19.1 4 18 4H14V6H18V10H20V6ZM6 6H10V4H6C4.9 4 4 4.9 4 6V10H6V6ZM20 18V14H18V18H14V20H18C19.1 20 20 19.1 20 18Z"
-        fill={props.fill || 'white'}
+        fill="white"
       />
     </svg>
   ),

src/components/LightBox/LightBox.tsx

@@ -1,5 +1,6 @@
+import { uiConfigs } from '@/configs/ui.configs'
 import { lsdUtils } from '@/utils/lsd.utils'
-import { useIsMobile } from '@/utils/ui.utils'
+import { useIsMobile, useOnWindowResize } from '@/utils/ui.utils'
 import { IconButton } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import React, {
@@ -13,7 +14,6 @@ import QuickPinchZoom, { make3dTransformValue } from 'react-quick-pinch-zoom'
 import { useWindowScroll } from 'react-use'
 import { ExitFullscreenIcon } from '../Icons/ExitFullscreenIcon'
 import { FullscreenIcon } from '../Icons/FullscreenIcon'
-import { HEADER_HEIGHT_PX } from '../NavBar/NavBar'
 
 type UseLightBoxReturnType = {
   getStyle: (element: HTMLElement | null) => React.CSSProperties
@@ -67,9 +67,12 @@ export const useLightBox = (): UseLightBoxReturnType => {
     })
   }
 
-  const close = () => {
+  const close = useCallback(() => {
     setDisplayedElement(null)
-  }
+  }, [])
+
+  // When the window is resized, close the lightbox.
+  useOnWindowResize(close)
 
   // If the user scrolls, close the lightbox.
   useEffect(() => {
@@ -236,7 +239,7 @@ export const Header = styled.header`
   left: 0;
 
   width: 100%;
-  height: ${HEADER_HEIGHT_PX};
+  height: ${uiConfigs.navbarRenderedHeight - 1}px;
 
   z-index: 1000;
 

src/components/NavBar/NavBar.tsx

@@ -21,8 +21,6 @@ import { NavbarState, useNavbarState } from '../../states/navbarState'
 import { lsdUtils } from '../../utils/lsd.utils'
 import { LogosIcon } from '../Icons/LogosIcon'
 
-export const HEADER_HEIGHT_PX = '44px'
-
 export interface NavBarProps {
   defaultState?: Partial<NavbarState>
 }
@@ -127,7 +125,7 @@ const Container = styled.header<{
   bordered?: boolean
 }>`
   width: 100%;
-  height: ${HEADER_HEIGHT_PX};
+  height: 44px;
 
   position: fixed;
   top: 0;

src/utils/ui.utils.ts

@@ -161,4 +161,14 @@ export const useIsMobile = () => {
   return windowSize.width < smWidth
 }
 
+export const useOnWindowResize = (callback: () => void): void => {
+  useEffect(() => {
+    window.addEventListener('resize', callback)
+
+    return () => {
+      window.removeEventListener('resize', callback)
+    }
+  }, [callback])
+}
+
 export default useWindowSize