fix: Fixes unread view blocking page scroll (#2727)

* fix: Fixes unread view blocking page scroll

* Update sdk.js

* Fixes the height issue for unread view

* Fix unread message position issue

* Code climate fixes

* Fixes height issue for large messages

* Fixes height issue on unread view

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/sdk/IFrameHelper.js

@@ -140,7 +140,10 @@ export const IFrameHelper = {
       }
     },
     onLocationChange: ({ referrerURL, referrerHost }) => {
-      IFrameHelper.sendMessage('change-url', { referrerURL, referrerHost });
+      IFrameHelper.sendMessage('change-url', {
+        referrerURL,
+        referrerHost,
+      });
     },
 
     setUnreadMode: message => {
@@ -175,6 +178,22 @@ export const IFrameHelper = {
       const holderEl = document.querySelector('.woot-widget-holder');
       removeClass(holderEl, 'has-unread-view');
     },
+
+    updateIframeHeight: message => {
+      setTimeout(() => {
+        const iframe = IFrameHelper.getAppFrame();
+        const scrollableMessageHeight =
+          iframe.contentWindow.document.querySelector('.unread-messages')
+            .scrollHeight + 40;
+        const updatedIframeHeight = message.isFixedHeight
+          ? `${scrollableMessageHeight}px`
+          : '100%';
+        iframe.setAttribute(
+          'style',
+          `height: ${updatedIframeHeight} !important`
+        );
+      }, 100);
+    },
   },
   pushEvent: eventName => {
     IFrameHelper.sendMessage('push-event', { eventName });

app/javascript/sdk/sdk.js

@@ -12,6 +12,7 @@ export const SDK_CSS = `.woot-widget-holder {
   border: 0;
   height: 100% !important;
   width: 100% !important;
+  max-height: 100vh !important;
 }
 
 .woot-widget-holder.has-unread-view {
@@ -109,7 +110,8 @@ export const SDK_CSS = `.woot-widget-holder {
 }
 
 .woot--hide {
-  bottom: -20000px;
+  bottom: -20000px !important;
+  top: unset !important;
   opacity: 0;
   visibility: hidden !important;
   z-index: -1 !important;
@@ -126,12 +128,36 @@ export const SDK_CSS = `.woot-widget-holder {
     top: 0;
     width: 100%;
  }
+
+ .woot-widget-holder iframe {
+    min-height: 100% !important;
+  }
+
+
+ .woot-widget-holder.has-unread-view {
+    height: auto;
+    right: 0;
+    width: auto;
+    bottom: 0;
+    top: auto;
+    max-height: 100vh;
+    padding: 0 8px;
+  }
+ 
+  .woot-widget-holder.has-unread-view iframe {
+    min-height: unset !important;
+  }
+
+ .woot-widget-holder.has-unread-view.woot-elements--left {
+    left: 0;
+  }
+  
   .woot-widget-bubble.woot--close {
     bottom: 60px;
     opacity: 0;
     visibility: hidden !important;
     z-index: -1 !important;
- }
+  }
 }
 
 @media only screen and (min-width: 667px) {