From 254078e9b6a7b676d0b95134ec6fcddf33cfa058 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 8 May 2024 09:23:52 +0000
Subject: [PATCH] feat: within cell show full image with fixed height and in
 expanded keep height fixed and crop rest if overflows

---
 .../nc-gui/components/cell/attachment/Image.vue     |  2 +-
 .../nc-gui/components/cell/attachment/index.vue     | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Image.vue b/packages/nc-gui/components/cell/attachment/Image.vue
index 0adefec5bd..2c0a768c28 100644
--- a/packages/nc-gui/components/cell/attachment/Image.vue
+++ b/packages/nc-gui/components/cell/attachment/Image.vue
@@ -16,7 +16,7 @@ const onError = () => index.value++
 <template>
   <LazyNuxtImg
     v-if="index < props.srcs.length"
-    class="m-auto object-cover"
+    class="m-auto h-full w-auto"
     :src="props.srcs[index]"
     :alt="props?.alt || ''"
     placeholder
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 2d4d64091d..e87821c12f 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -282,8 +282,8 @@ const keydownSpace = (e: KeyboardEvent) => {
             </template>
             <div v-if="isImage(item.title, item.mimetype ?? item.type)">
               <div
-                class="nc-attachment flex items-center flex-col flex-wrap justify-center"
-                :class="{ 'ml-2': active }"
+                class="nc-attachment flex items-center flex-col flex-wrap justify-center flex-auto"
+                :class="{ 'ml-2': active, '!w-30': isForm || isExpandedForm }"
                 @click="() => onImageClick(item)"
               >
                 <LazyCellAttachmentImage
@@ -292,10 +292,9 @@ const keydownSpace = (e: KeyboardEvent) => {
                   :class="{
                     'h-5.5': !isGrid && (!rowHeight || rowHeight === 1),
                     'h-4.5': isGrid && (!rowHeight || rowHeight === 1),
-                    'w-8.8': rowHeight === 1,
-                    'h-8 w-12.8': rowHeight === 2,
-                    'h-16.8 w-20.8': rowHeight === 4,
-                    'h-20.8 !w-30': isForm || isExpandedForm || rowHeight === 6,
+                    'h-8': rowHeight === 2,
+                    'h-16.8': rowHeight === 4,
+                    'h-20.8': rowHeight === 6 || isForm || isExpandedForm,
                   }"
                   :srcs="getPossibleAttachmentSrc(item)"
                 />
@@ -341,7 +340,7 @@ const keydownSpace = (e: KeyboardEvent) => {
 .nc-cell {
   .nc-attachment-cell {
     .nc-attachment {
-      @apply min-h-5.5 min-w-[1.8rem] !ring-1 !ring-gray-300 !rounded;
+      @apply min-h-5.5 !ring-1 !ring-gray-300 !rounded;
     }
 
     .ghost,