From c6ada97d2c8debd7301dca6a32ae98f44c52b999 Mon Sep 17 00:00:00 2001
From: vanbasten17 <marcrabat@gmail.com>
Date: Fri, 25 Oct 2024 15:55:45 +0200
Subject: [PATCH] fix: take into account header and input when recalculating
 webchat dimensions

---
 .../src/webchat/hooks/use-webchat-dimensions.ts | 17 ++++++++---------
 packages/botonic-react/src/webchat/webchat.jsx  |  1 +
 2 files changed, 9 insertions(+), 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
index 51a51cba68..313ba115cb 100644
--- 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
index bfabddc1a0..48dc7d2fa7 100644
--- 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`