From c6dc1675d89f74ddec6f230b24c6883b54965ea5 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Sun, 10 Nov 2024 22:13:48 +0000
Subject: [PATCH] fix: smoother animation on large modal close

---
 extensions/react-widget/src/components/DocsGPTWidget.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx
index c9afebf6..d01e1635 100644
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -165,9 +165,14 @@ const StyledContainer = styled.div<{ isOpen: boolean }>`
     @keyframes fadeOut {
       from {
         opacity: 1;
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
       }
       to {
         opacity: 0;
+        transform: scale(0.9);
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
       }
     }
     @media only screen and (max-width: 768px) {
@@ -612,14 +617,12 @@ export const DocsGPTWidget = ({
   };
   const handleClose = () => {
     setOpen(false);
-    size !== "large" ? setTimeout(() => {
+    setTimeout(() => {
       if (widgetRef.current) widgetRef.current.style.display = "none";
       setIsFloatingButtonVisible(true);
       setIsAnimatingButton(true);
       setTimeout(() => setIsAnimatingButton(false), 200);
     }, 250)
-      :
-      widgetRef.current && (widgetRef.current.style.display = "none") && setIsFloatingButtonVisible(true);
   };
   const handleOpen = () => {
     setOpen(true);