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/widget/App.vue

@@ -97,6 +97,12 @@ export default {
         label: this.$t('BUBBLE.LABEL'),
       });
     },
+    setIframeHeight(isFixedHeight) {
+      IFrameHelper.sendMessage({
+        event: 'updateIframeHeight',
+        isFixedHeight,
+      });
+    },
     setLocale(locale) {
       const { enabledLanguages } = window.chatwootWebChannel;
       if (enabledLanguages.some(lang => lang.iso_639_1_code === locale)) {
@@ -146,6 +152,7 @@ export default {
         IFrameHelper.sendMessage({
           event: 'setCampaignMode',
         });
+        this.setIframeHeight(this.isMobile);
       }
     },
     setUnreadView() {
@@ -155,11 +162,13 @@ export default {
           event: 'setUnreadMode',
           unreadMessageCount,
         });
+        this.setIframeHeight(this.isMobile);
       }
     },
     unsetUnreadView() {
       if (this.isIFrame) {
         IFrameHelper.sendMessage({ event: 'resetUnreadMode' });
+        this.setIframeHeight();
       }
     },
     createWidgetEvents(message) {

app/javascript/widget/assets/scss/woot.scss

@@ -19,10 +19,15 @@ body {
 }
 
 .woot-widget-wrap {
+  display: flex;
+  flex-direction: column;
   height: 100%;
+  justify-content: flex-end;
 }
 
 .is-mobile {
+  display: block;
+
   .actions {
     .close-button {
       display: block !important;

app/javascript/widget/views/Unread.vue

@@ -122,7 +122,8 @@ export default {
 
 .unread-wrap {
   width: 100%;
-  height: 100%;
+  height: auto;
+  max-height: 100vh;
   background: transparent;
   display: flex;
   flex-direction: column;