fix: take into account header and input when recalculating webchat di…

…mensions
hubtype · Oct 25, 2024 · c6ada97 · c6ada97
1 parent f9d4f76
commit c6ada97
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/packages/botonic-react/src/webchat/hooks/use-webchat-dimensions.ts b/packages/botonic-react/src/webchat/hooks/use-webchat-dimensions.ts
@@ -28,18 +28,17 @@ export const useWebchatDimensions = () => {
     const headerElement = headerRef.current
     const inputPanelElement = inputPanelRef.current
 
-    if (
-      !isWebchatOpen ||
-      !webchatElement ||
-      !headerElement ||
-      !inputPanelElement
-    )
-      return 0
+    if (!isWebchatOpen || !webchatElement) return 0
+
+    const headerElementHeight = headerElement ? headerElement.clientHeight : 0
+    const inputPanelElementHeight = inputPanelElement
+      ? inputPanelElement.clientHeight
+      : 0
 
     return (
       webchatElement.clientHeight -
-      headerElement.clientHeight -
-      inputPanelElement.clientHeight
+      headerElementHeight -
+      inputPanelElementHeight
     )
   }, [isWebchatOpen])
 

diff --git a/packages/botonic-react/src/webchat/webchat.jsx b/packages/botonic-react/src/webchat/webchat.jsx
@@ -71,6 +71,7 @@ const StyledWebchat = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  overflow: hidden;
 `
 
 const ErrorMessageContainer = styled.div`