From 7bfbb43e5cec969f20825357cf39a637ff81a5b8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 00:19:35 +0200
Subject: [PATCH] chore(gui-v2): prevent image overflow in modal

---
 .../components/cell/attachment/Modal.vue         | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index f51ffaf9f2..09a8b7f7c6 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -97,8 +97,12 @@ onKeyDown('Escape', () => {
               </div>
             </a-tooltip>
 
-            <div class="nc-attachment p-2 flex items-center cursor-pointer">
-              <img v-if="isImage(item.title, item.mimetype)" :alt="item.title || `#${i}`" :src="item.url || item.data" />
+            <div class="nc-attachment h-full w-full flex items-center justify-center cursor-move">
+              <div
+                v-if="isImage(item.title, item.mimetype)"
+                :style="{ backgroundImage: `url('${item.url}')`, backgroundSize: 'cover' }"
+                class="w-full h-full"
+              />
 
               <component
                 :is="FileIcon(item.icon)"
@@ -147,21 +151,21 @@ onKeyDown('Escape', () => {
   }
 
   .nc-attachment-download {
-    @apply absolute bottom-2 right-2;
+    @apply bg-white absolute bottom-2 right-2;
     @apply transition-opacity duration-150 ease-in opacity-0 hover:ring;
     @apply cursor-pointer rounded shadow flex items-center p-1 border-1;
     @apply active:(ring border-0 ring-pink-500);
   }
 
   .nc-attachment-remove {
-    @apply absolute top-2 right-2;
+    @apply absolute top-2 right-2 bg-white;
     @apply hover:(ring ring-red-500);
-    @apply cursor-pointer rounded-full border-1;
+    @apply cursor-pointer rounded-full border-2;
     @apply active:(ring border-0 ring-red-500);
   }
 
   .ant-card-body {
-    @apply !p-2;
+    @apply !p-2 w-full h-full;
   }
 
   .ant-modal-body {