Fixed height computation issue in Pane component

src/components/Pane/index.jsx

@@ -11,10 +11,9 @@ import Button from "components/Button";
 import { useOverlay, useOverlayManager } from "hooks";
 
 import Body from "./Body";
-import { DEFAULT_PANE_HEADER_HEIGHT } from "./constants";
 import Footer from "./Footer";
 import Header from "./Header";
-import { getHeaderHeight } from "./utils";
+import { getHeader, updateHeaderHeight } from "./utils";
 
 const SIZES = { small: "small", large: "large" };
 
@@ -36,6 +35,7 @@ const Pane = ({
 
   const paneWrapper = useRef(null);
   const backdropRef = useRef(null);
+  const observerRef = useRef(null);
 
   useOverlayManager(paneWrapper, isOpen);
 
@@ -52,14 +52,20 @@ const Pane = ({
   });
 
   useEffect(() => {
-    if (!hasTransitionCompleted) return;
-    const headerHeight = getHeaderHeight(paneWrapper);
-    if (headerHeight > DEFAULT_PANE_HEADER_HEIGHT) {
-      paneWrapper.current.style.setProperty(
-        "--neeto-ui-pane-header-height",
-        `${headerHeight}px`
+    if (!hasTransitionCompleted) return undefined;
+
+    const header = getHeader(paneWrapper);
+    if (!header) return undefined;
+
+    if (!observerRef.current) {
+      observerRef.current = new ResizeObserver(() =>
+        updateHeaderHeight(paneWrapper, header)
       );
     }
+
+    observerRef.current.observe(header);
+
+    return () => observerRef.current?.disconnect();
   }, [hasTransitionCompleted]);
 
   return (

src/components/Pane/utils.js

@@ -1,7 +1,17 @@
 import { DEFAULT_PANE_HEADER_HEIGHT } from "./constants";
 
-export const getHeaderHeight = paneWrapper => {
-  const header = paneWrapper.current.querySelector(".neeto-ui-pane__header");
+export const getHeader = paneWrapper =>
+  paneWrapper.current.querySelector(".neeto-ui-pane__header");
 
-  return header ? header.offsetHeight : DEFAULT_PANE_HEADER_HEIGHT;
+export const updateHeaderHeight = (paneWrapper, header) => {
+  const headerHeight = header.offsetHeight;
+
+  if (headerHeight > DEFAULT_PANE_HEADER_HEIGHT) {
+    paneWrapper.current.style.setProperty(
+      "--neeto-ui-pane-header-height",
+      `${headerHeight}px`
+    );
+  } else {
+    paneWrapper.current.style.removeProperty("--neeto-ui-pane-header-height");
+  }
 };