fix: Add a full width image view to fix resolution issues (#1363)

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -34,7 +34,7 @@
     }
 
     .modal-image {
-      max-width: 80%;
+      max-width: 85%;
     }
 
     &::before {

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: {
+    fullWidth: {
-      type: String,
+      type: Boolean,
-      default: '',
+      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>

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>