From fa864cc9eefc77a8b2c9f9fde9ffd81f5506c520 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@thoughtwoot.com>
Date: Mon, 26 Oct 2020 00:28:23 +0530
Subject: [PATCH] fix: Add a full width image view to fix resolution issues
 (#1363)

---
 .../scss/widgets/_conversation-view.scss      |  2 +-
 app/javascript/dashboard/components/Modal.vue | 28 ++++++++++++++++---
 .../widgets/conversation/bubble/Image.vue     |  2 +-
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index dde956eaa..c511ee243 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -34,7 +34,7 @@
     }
 
     .modal-image {
-      max-width: 80%;
+      max-width: 85%;
     }
 
     &::before {
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index 6838b308c..88138cf86 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -6,7 +6,7 @@
       transition="modal"
       @click="onBackDropClick"
     >
-      <div class="modal-container" :class="className" @click.stop>
+      <div :class="modalContainerClassName" @click.stop>
         <i class="ion-android-close modal--close" @click="close"></i>
         <slot />
       </div>
@@ -26,9 +26,18 @@ export default {
       type: Function,
       required: true,
     },
-    className: {
-      type: String,
-      default: '',
+    fullWidth: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    modalContainerClassName() {
+      let className = 'modal-container';
+      if (this.fullWidth) {
+        return `${className} modal-container--full-width`;
+      }
+      return className;
     },
   },
   mounted() {
@@ -50,3 +59,14 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.modal-container--full-width {
+  align-items: center;
+  border-radius: 0;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}
+</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
index a3d09424e..124ce09c9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="image message-text__wrap">
     <img :src="url" @click="onClick" />
-    <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal :full-width="true" :show.sync="show" :on-close="onClose">
       <img :src="url" class="modal-image" />
     </woot-modal>
   </div>