chore: add resize observer to dialog content

Author: plagoa

packages/core/src/Dialog/Content/Content.styles.tsx

@@ -9,6 +9,8 @@ export const { staticClasses, useClasses } = createClasses("HvDialog-Content", {
     paddingLeft: `calc(42px + ${theme.space.sm})`,
     paddingRight: "62px",
     overflowY: "auto",
+  },
+  contentBorder: {
     borderTop: "var(--content-border)",
     borderBottom: "var(--content-border)",
   },

packages/core/src/Dialog/Content/Content.tsx

@@ -34,16 +34,28 @@ export const HvDialogContent = (props: HvDialogContentProps) => {
 
   const { classes, cx } = useClasses(classesProp);
   const [hasBorder, setHasBorder] = useState(false);
-
   const elRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const el = elRef.current as HTMLElement | null;
-    if (el) {
-      const hasOverflow = el.scrollHeight > el.clientHeight;
-      setHasBorder(hasOverflow);
+    if (typeof ResizeObserver !== "undefined") {
+      const resizeObserver = new ResizeObserver(() => {
+        const el = elRef.current as HTMLElement | null;
+        if (el) {
+          const hasOverflow = el.scrollHeight > el.clientHeight;
+          setHasBorder(hasOverflow);
+        }
+      });
+
+      if (elRef.current) {
+        resizeObserver.observe(elRef.current as HTMLElement);
+      }
+
+      return () => {
+        resizeObserver.disconnect();
+      };
     }
-  }, [elRef]);
+    return undefined;
+  }, []);
 
   return (
     <HvTypography
@@ -52,6 +64,7 @@ export const HvDialogContent = (props: HvDialogContentProps) => {
       className={cx(
         classes.root,
         { [classes.textContent]: !!indentContent },
+        { [classes.contentBorder]: hasBorder },
         className,
       )}
       style={{

packages/core/src/Dialog/Title/Title.tsx

@@ -8,7 +8,6 @@ import {
 
 import { HvStatusIcon } from "../../StatusIcon";
 import { HvTypography } from "../../Typography";
-import { iconVariant } from "../../utils/iconVariant";
 import { useDialogContext } from "../context";
 import { staticClasses, useClasses } from "./Title.styles";