From 777c1d6b7a2f1eac8812207fbfddac65d10631ca Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Mon, 5 Aug 2024 09:18:58 +0200
Subject: [PATCH] feat(OnboardingChecklist): resize observer

---
 .../components/CheckListItem.tsx              | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/src/components/OnboardingChecklist/components/CheckListItem.tsx b/packages/react-components/src/components/OnboardingChecklist/components/CheckListItem.tsx
index 5298ae312..7d2c4bfbb 100644
--- a/packages/react-components/src/components/OnboardingChecklist/components/CheckListItem.tsx
+++ b/packages/react-components/src/components/OnboardingChecklist/components/CheckListItem.tsx
@@ -27,11 +27,21 @@ export const CheckListItem: React.FC<ICheckListItem> = ({
   const [size, setSize] = React.useState(0);
 
   React.useEffect(() => {
-    if (
-      descriptionRef.current &&
-      size !== descriptionRef.current.offsetHeight
-    ) {
-      setSize(descriptionRef.current.offsetHeight);
+    const hasIOSupport = !!window.ResizeObserver;
+
+    if (descriptionRef.current && hasIOSupport) {
+      const resizeObserver = new ResizeObserver(() => {
+        if (
+          descriptionRef.current &&
+          size !== descriptionRef.current.offsetHeight
+        ) {
+          setSize(descriptionRef.current.offsetHeight);
+        }
+      });
+
+      resizeObserver.observe(descriptionRef.current);
+
+      return () => resizeObserver.disconnect();
     }
   }, [descriptionRef]);
 
@@ -69,7 +79,7 @@ export const CheckListItem: React.FC<ICheckListItem> = ({
           className={styles[`${baseClass}__content__inner`]}
           style={{ maxHeight: isActive ? size : 0 }}
         >
-          <span ref={descriptionRef}>
+          <div ref={descriptionRef}>
             <Text
               size="lg"
               className={styles[`${baseClass}__content__inner__description`]}
@@ -98,7 +108,7 @@ export const CheckListItem: React.FC<ICheckListItem> = ({
                 </Button>
               )}
             </div>
-          </span>
+          </div>
         </div>
       </div>
     </div>