From d7e9044c713e01fcf05a7032cf46d3c7cf474e77 Mon Sep 17 00:00:00 2001
From: Nithin David <1277421+nithindavid@users.noreply.github.com>
Date: Thu, 12 Aug 2021 18:35:41 +0530
Subject: [PATCH] Smoothen CSS animations

---
 app/javascript/sdk/IFrameHelper.js     | 12 +++++++++++-
 app/javascript/sdk/sdk.js              |  6 ++++--
 app/javascript/widget/views/Unread.vue |  2 +-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index 16aa0d0ea..97e7b8761 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/app/javascript/sdk/IFrameHelper.js
@@ -185,9 +185,19 @@ export const IFrameHelper = {
         const unreadMessageWrap = iframe.contentWindow.document.querySelector(
           '.unread-messages'
         );
+        const unreadCloseWrap = iframe.contentWindow.document.querySelector(
+          '.close-unread-wrap'
+        );
+        const readViewWrap = iframe.contentWindow.document.querySelector(
+          '.open-read-view-wrap'
+        );
 
         if (!unreadMessageWrap) return;
-        const scrollableMessageHeight = unreadMessageWrap.scrollHeight + 80;
+
+        let scrollableMessageHeight = unreadMessageWrap.scrollHeight;
+        if (unreadCloseWrap)
+          scrollableMessageHeight += unreadCloseWrap.scrollHeight;
+        if (readViewWrap) scrollableMessageHeight += readViewWrap.scrollHeight;
 
         const updatedIframeHeight = message.isFixedHeight
           ? `${scrollableMessageHeight}px`
diff --git a/app/javascript/sdk/sdk.js b/app/javascript/sdk/sdk.js
index 4a327241d..c9a14b24c 100644
--- a/app/javascript/sdk/sdk.js
+++ b/app/javascript/sdk/sdk.js
@@ -1,10 +1,11 @@
 export const SDK_CSS = `.woot-widget-holder {
   box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
   opacity: 1;
+  will-change: transform, opacity;
   transform: translateY(0);
   overflow: hidden !important;
   position: fixed !important;
-  transition: opacity 0.2s, transform 0.25s;
+  transition: opacity 0.2s linear, transform 0.25s linear;
   z-index: 2147483000 !important;
 }
 
@@ -110,7 +111,8 @@ export const SDK_CSS = `.woot-widget-holder {
 }
 
 .woot--hide {
-  transform: translateY(100vh);
+  bottom: -100vh;
+  transform: translateY(40px);
   top: unset !important;
   opacity: 0;
   visibility: hidden !important;
diff --git a/app/javascript/widget/views/Unread.vue b/app/javascript/widget/views/Unread.vue
index e45a4f2b4..c21f3d803 100644
--- a/app/javascript/widget/views/Unread.vue
+++ b/app/javascript/widget/views/Unread.vue
@@ -23,7 +23,7 @@
       />
     </div>
 
-    <div>
+    <div class="open-read-view-wrap">
       <button
         v-if="unreadMessageCount"
         class="button clear-button"