From 13de6c8bf0f1dc427129f7bdc6f7157e2aa1a3a6 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 19 Sep 2023 10:26:56 +0530
Subject: [PATCH 01/13] fix: gallery card design

---
 .../nc-gui/components/smartsheet/Gallery.vue  | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index de737f0cc0..6b9a642a90 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -274,7 +274,7 @@ watch(
                     <LazyCellAttachmentImage
                       v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
                       :key="`carousel-${record.row.id}-${index}`"
-                      class="h-52 object-contain"
+                      class="h-52 object-cover"
                       :srcs="getPossibleAttachmentSrc(attachment)"
                     />
                   </template>
@@ -287,13 +287,18 @@ watch(
               <div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
                 <div
                   v-if="!isRowEmpty(record, col) || isLTAR(col.uidt, col.colOptions)"
-                  class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
+                  class="flex flex-col space-y-1 px-1 rounded-lg w-full"
                 >
-                  <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
+                  <div class="flex flex-row w-full justify-start">
                     <div class="w-full text-gray-600">
-                      <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
-
-                      <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+                      <LazySmartsheetHeaderVirtualCell
+                        v-if="isVirtualCol(col)"
+                        :column="col"
+                        :hide-menu="true"
+                        :hide-icon="true"
+                      />
+
+                      <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" :hide-icon="true" />
                     </div>
                   </div>
 
@@ -356,6 +361,10 @@ watch(
   grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
 }
 
+.ant-card-body {
+  @apply !p-0;
+}
+
 :deep(.slick-dots li button) {
   background-color: black;
 }

From 2dc4665050c31577288e2c11c6937f26f47eb0e6 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 19 Sep 2023 12:55:38 +0530
Subject: [PATCH 02/13] feat: cleanup gallery view

---
 packages/nc-gui/components.d.ts               |  1 +
 .../nc-gui/components/smartsheet/Gallery.vue  | 72 +++++++++++++------
 2 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 208fef4e85..ec39c7fb6f 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -120,6 +120,7 @@ declare module '@vue/runtime-core' {
     MdiChatProcessingOutline: typeof import('~icons/mdi/chat-processing-outline')['default']
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
+    MdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default']
     MdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     MdiCircleMedium: typeof import('~icons/mdi/circle-medium')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 6b9a642a90..9307a02fd2 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -59,6 +59,8 @@ provide(IsFormInj, ref(false))
 provide(IsGalleryInj, ref(true))
 provide(IsGridInj, ref(false))
 
+provide(RowHeightInj, ref(1 as const))
+
 const isPublic = inject(IsPublicInj, ref(false))
 
 const fields = inject(FieldsInj, ref([]))
@@ -69,7 +71,11 @@ const router = useRouter()
 
 const { getPossibleAttachmentSrc } = useAttachment()
 
-const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id))
+const fieldsWithoutCover = computed(() =>
+  fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id && !isPrimary(f)),
+)
+
+const displayField = computed(() => meta.value?.columns?.find((c) => c.pv) ?? meta.value?.columns[0])
 
 const coverImageColumn: any = computed(() =>
   meta.value?.columnsById
@@ -229,7 +235,7 @@ watch(
     </template>
 
     <div
-      class="flex flex-col w-full nc-gallery nc-scrollbar-md"
+      class="flex flex-col w-full nc-gallery nc-scrollbar-md bg-[#fbfbfb]"
       data-testid="nc-gallery-wrapper"
       style="height: calc(100% - var(--topbar-height) + 0.7rem)"
       :class="{
@@ -241,12 +247,12 @@ watch(
           <a-skeleton-input v-for="index of Array(20)" :key="index" class="!min-w-60.5 !h-96 !rounded-md overflow-hidden" />
         </div>
       </div>
-      <div v-else class="nc-gallery-container grid gap-2 my-4 px-3">
+      <div v-else class="nc-gallery-container grid gap-3 my-4 px-3">
         <div v-for="(record, rowIndex) in data" :key="`record-${record.row.id}`">
           <LazySmartsheetRow :row="record">
             <a-card
-              hoverable
-              class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
+              class="!rounded-lg h-full border-gray-200 border-1 group overflow-hidden break-all max-w-[450px] shadow-sm hover:shadow-md"
+              :body-style="{ padding: '12px' }"
               :data-testid="`nc-gallery-card-${record.row.id}`"
               :style="isPublic ? { cursor: 'default' } : { cursor: 'pointer' }"
               @click="expandFormClick($event, record)"
@@ -263,18 +269,26 @@ watch(
                   </template>
 
                   <template #prevArrow>
-                    <div style="z-index: 1"></div>
+                    <div style="z-index: 1">
+                      <MdiChevronLeft
+                        class="text-gray-700 w-6 h-6 absolute left-1.5 bottom-[-90px] !hidden !group-hover:block !bg-white border-1 border-gray-200 rounded-sm"
+                      />
+                    </div>
                   </template>
 
                   <template #nextArrow>
-                    <div style="z-index: 1"></div>
+                    <div style="z-index: 1">
+                      <MdiChevronRight
+                        class="text-gray-700 w-6 h-6 absolute right-1.5 bottom-[-90px] !hidden !group-hover:block !bg-white border-1 border-gray-200 rounded-sm"
+                      />
+                    </div>
                   </template>
 
                   <template v-for="(attachment, index) in attachments(record)">
                     <LazyCellAttachmentImage
                       v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
                       :key="`carousel-${record.row.id}-${index}`"
-                      class="h-52 object-cover"
+                      class="h-52 border-b-1 border-gray-200 object-cover"
                       :srcs="getPossibleAttachmentSrc(attachment)"
                     />
                   </template>
@@ -283,14 +297,32 @@ watch(
                   <img class="object-contain w-[48px] h-[48px]" src="~assets/icons/FileIconImageBox.png" />
                 </div>
               </template>
+              <h2 v-if="displayField" class="text-lg font-bold">
+                <LazySmartsheetVirtualCell
+                  v-if="isVirtualCol(displayField)"
+                  v-model="record.row[displayField.title]"
+                  class="!text-gray-600"
+                  :column="displayField"
+                  :row="record"
+                />
+
+                <LazySmartsheetCell
+                  v-else
+                  v-model="record.row[displayField.title]"
+                  class="!text-gray-600"
+                  :column="displayField"
+                  :edit-enabled="false"
+                  :read-only="true"
+                />
+              </h2>
 
               <div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
                 <div
                   v-if="!isRowEmpty(record, col) || isLTAR(col.uidt, col.colOptions)"
-                  class="flex flex-col space-y-1 px-1 rounded-lg w-full"
+                  class="flex flex-col space-y-1 ml-[-4px] rounded-lg w-full"
                 >
-                  <div class="flex flex-row w-full justify-start">
-                    <div class="w-full text-gray-600">
+                  <div class="flex flex-row w-full justify-start scale-75">
+                    <div class="w-full text-gray-300">
                       <LazySmartsheetHeaderVirtualCell
                         v-if="isVirtualCol(col)"
                         :column="col"
@@ -302,7 +334,7 @@ watch(
                     </div>
                   </div>
 
-                  <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
+                  <div class="flex flex-row w-full pb-3 text-gray-700 pl-1 items-center justify-start">
                     <LazySmartsheetVirtualCell
                       v-if="isVirtualCol(col)"
                       v-model="record.row[col.title]"
@@ -358,7 +390,7 @@ watch(
 <style scoped>
 .nc-gallery-container {
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 }
 
 .ant-card-body {
@@ -370,13 +402,13 @@ watch(
 }
 
 .ant-carousel.gallery-carousel :deep(.slick-dots) {
-  position: relative;
+  position: absolute;
   height: auto;
-  bottom: 0;
+  bottom: 3;
 }
 
 .ant-carousel.gallery-carousel :deep(.slick-dots li div > div) {
-  background: #000;
+  background: #d9d9d9;
   border: 0;
   border-radius: 1px;
   color: transparent;
@@ -384,7 +416,7 @@ watch(
   display: block;
   font-size: 0;
   height: 3px;
-  opacity: 0.3;
+  opacity: 1;
   outline: none;
   padding: 0;
   transition: all 0.5s;
@@ -397,15 +429,9 @@ watch(
 
 .ant-carousel.gallery-carousel :deep(.slick-prev) {
   left: 0;
-  height: 100%;
-  top: 12px;
-  width: 50%;
 }
 
 .ant-carousel.gallery-carousel :deep(.slick-next) {
   right: 0;
-  height: 100%;
-  top: 12px;
-  width: 50%;
 }
 </style>

From 3c6636f100d271ceea8ff823ca83155b9c8cdec5 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 19 Sep 2023 13:05:09 +0530
Subject: [PATCH 03/13] fix: small fix

---
 packages/nc-gui/components/smartsheet/Gallery.vue | 4 +++-
 packages/nc-gui/components/virtual-cell/Links.vue | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 9307a02fd2..bf424b835e 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -75,7 +75,9 @@ const fieldsWithoutCover = computed(() =>
   fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id && !isPrimary(f)),
 )
 
-const displayField = computed(() => meta.value?.columns?.find((c) => c.pv) ?? meta.value?.columns[0])
+const displayField = computed(() =>
+  meta.value?.columns?.find((c) => c.pv) ?? meta.value?.columns ? meta.value?.columns[0] : null,
+)
 
 const coverImageColumn: any = computed(() =>
   meta.value?.columnsById
diff --git a/packages/nc-gui/components/virtual-cell/Links.vue b/packages/nc-gui/components/virtual-cell/Links.vue
index 1981b298e0..3e0c5eb5d8 100644
--- a/packages/nc-gui/components/virtual-cell/Links.vue
+++ b/packages/nc-gui/components/virtual-cell/Links.vue
@@ -97,7 +97,7 @@ const localCellValue = computed<any[]>(() => {
       <component
         :is="isLocked || isUnderLookup ? 'span' : 'a'"
         :title="textVal"
-        class="text-center pl-3 nc-datatype-link underline-transparent"
+        class="text-center nc-datatype-link underline-transparent"
         :class="{ '!text-gray-300': !textVal }"
         @click.stop.prevent="openChildList"
       >

From 34c390ffea062e9bb49a02c1431252ee6588a536 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 19 Sep 2023 14:37:35 +0530
Subject: [PATCH 04/13] fix: carousel style

---
 .../nc-gui/components/smartsheet/Gallery.vue  | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index bf424b835e..c139bac60e 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -75,9 +75,7 @@ const fieldsWithoutCover = computed(() =>
   fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id && !isPrimary(f)),
 )
 
-const displayField = computed(() =>
-  meta.value?.columns?.find((c) => c.pv) ?? meta.value?.columns ? meta.value?.columns[0] : null,
-)
+const displayField = computed(() => meta.value?.columns?.find((c) => c.pv) ?? null)
 
 const coverImageColumn: any = computed(() =>
   meta.value?.columnsById
@@ -261,7 +259,7 @@ watch(
               @contextmenu="showContextMenu($event, { row: rowIndex })"
             >
               <template v-if="galleryData?.fk_cover_image_col_id" #cover>
-                <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel" arrows>
+                <a-carousel v-if="!reloadAttachments && attachments(record).length" class="gallery-carousel" arrows>
                   <template #customPaging>
                     <a>
                       <div class="pt-[12px]">
@@ -273,7 +271,7 @@ watch(
                   <template #prevArrow>
                     <div style="z-index: 1">
                       <MdiChevronLeft
-                        class="text-gray-700 w-6 h-6 absolute left-1.5 bottom-[-90px] !hidden !group-hover:block !bg-white border-1 border-gray-200 rounded-sm"
+                        class="text-gray-700 w-6 h-6 absolute left-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition"
                       />
                     </div>
                   </template>
@@ -281,7 +279,7 @@ watch(
                   <template #nextArrow>
                     <div style="z-index: 1">
                       <MdiChevronRight
-                        class="text-gray-700 w-6 h-6 absolute right-1.5 bottom-[-90px] !hidden !group-hover:block !bg-white border-1 border-gray-200 rounded-sm"
+                        class="text-gray-700 w-6 h-6 absolute right-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition"
                       />
                     </div>
                   </template>
@@ -321,10 +319,10 @@ watch(
               <div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
                 <div
                   v-if="!isRowEmpty(record, col) || isLTAR(col.uidt, col.colOptions)"
-                  class="flex flex-col space-y-1 ml-[-4px] rounded-lg w-full"
+                  class="flex flex-col ml-[-4px] rounded-lg w-full"
                 >
                   <div class="flex flex-row w-full justify-start scale-75">
-                    <div class="w-full text-gray-300">
+                    <div class="w-full pb-1 text-gray-300">
                       <LazySmartsheetHeaderVirtualCell
                         v-if="isVirtualCol(col)"
                         :column="col"
@@ -336,7 +334,7 @@ watch(
                     </div>
                   </div>
 
-                  <div class="flex flex-row w-full pb-3 text-gray-700 pl-1 items-center justify-start">
+                  <div class="flex flex-row w-full pb-2 text-gray-700 pl-1 items-center justify-start">
                     <LazySmartsheetVirtualCell
                       v-if="isVirtualCol(col)"
                       v-model="record.row[col.title]"
@@ -392,7 +390,7 @@ watch(
 <style scoped>
 .nc-gallery-container {
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 }
 
 .ant-card-body {
@@ -404,31 +402,36 @@ watch(
 }
 
 .ant-carousel.gallery-carousel :deep(.slick-dots) {
+  @apply !w-auto;
   position: absolute;
   height: auto;
   bottom: 3;
 }
 
 .ant-carousel.gallery-carousel :deep(.slick-dots li div > div) {
+  @apply rounded-full;
   background: #d9d9d9;
   border: 0;
-  border-radius: 1px;
   color: transparent;
   cursor: pointer;
   display: block;
   font-size: 0;
-  height: 3px;
+  height: 8px;
   opacity: 1;
   outline: none;
   padding: 0;
   transition: all 0.5s;
-  width: 100%;
+  width: 8px;
 }
 
 .ant-carousel.gallery-carousel :deep(.slick-dots li.slick-active div > div) {
+  @apply bg-brand-500;
   opacity: 1;
 }
 
+.ant-carousel.gallery-carousel :deep(.slick-dots li) {
+  @apply !w-auto;
+}
 .ant-carousel.gallery-carousel :deep(.slick-prev) {
   left: 0;
 }

From 90c9481827027fab55d22d461a08438d70c8fdba Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Sep 2023 15:36:51 +0530
Subject: [PATCH 05/13] fix: gallery style

---
 packages/nc-gui/components/cell/Checkbox.vue  | 12 ++--
 .../nc-gui/components/smartsheet/Gallery.vue  | 61 +++++++------------
 2 files changed, 27 insertions(+), 46 deletions(-)

diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index bab7742ebb..5445c3e983 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -36,6 +36,8 @@ const isForm = inject(IsFormInj)
 
 const isEditColumnMenu = inject(EditColumnInj, ref(false))
 
+const isGallery = inject(IsGalleryInj, ref(false))
+
 const readOnly = inject(ReadonlyInj)
 
 const checkboxMeta = computed(() => {
@@ -80,18 +82,14 @@ useSelectedCellKeyupListener(active, (e) => {
   <div
     class="flex cursor-pointer w-full h-full"
     :class="{
-      'justify-center': !isForm,
-      'w-full': isForm,
+      'justify-center': !isForm || !isGallery,
+      'w-full flex-start': isForm || isGallery,
       'nc-cell-hover-show': !vModel && !readOnly,
       'opacity-0': readOnly && !vModel,
     }"
     @click="onClick(false, $event)"
   >
-    <div
-      class="items-center"
-      :class="{ '!ml-[-8px]': readOnly, 'w-full justify-start': isEditColumnMenu }"
-      @click="onClick(true)"
-    >
+    <div class="items-center" :class="{ 'w-full justify-start': isEditColumnMenu || isGallery }" @click="onClick(true)">
       <div :class="{ 'bg-gray-100 rounded-full ': !vModel }">
         <Transition name="layout" mode="out-in" :duration="100">
           <component
diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index c139bac60e..d25ac05592 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -19,7 +19,7 @@ import {
   extractPkFromRow,
   inject,
   isImage,
-  isLTAR,
+  isPrimary,
   nextTick,
   provide,
   ref,
@@ -252,14 +252,19 @@ watch(
           <LazySmartsheetRow :row="record">
             <a-card
               class="!rounded-lg h-full border-gray-200 border-1 group overflow-hidden break-all max-w-[450px] shadow-sm hover:shadow-md"
-              :body-style="{ padding: '12px' }"
+              :body-style="{ padding: '0px' }"
               :data-testid="`nc-gallery-card-${record.row.id}`"
               :style="isPublic ? { cursor: 'default' } : { cursor: 'pointer' }"
               @click="expandFormClick($event, record)"
               @contextmenu="showContextMenu($event, { row: rowIndex })"
             >
               <template v-if="galleryData?.fk_cover_image_col_id" #cover>
-                <a-carousel v-if="!reloadAttachments && attachments(record).length" class="gallery-carousel" arrows>
+                <a-carousel
+                  v-if="!reloadAttachments && attachments(record).length"
+                  class="gallery-carousel !border-b-1 !border-gray-200"
+                  arrows
+                  @click="expandFormClick($event, record)"
+                >
                   <template #customPaging>
                     <a>
                       <div class="pt-[12px]">
@@ -269,7 +274,7 @@ watch(
                   </template>
 
                   <template #prevArrow>
-                    <div style="z-index: 1">
+                    <div class="z-10">
                       <MdiChevronLeft
                         class="text-gray-700 w-6 h-6 absolute left-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition"
                       />
@@ -277,7 +282,7 @@ watch(
                   </template>
 
                   <template #nextArrow>
-                    <div style="z-index: 1">
+                    <div class="z-10">
                       <MdiChevronRight
                         class="text-gray-700 w-6 h-6 absolute right-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition"
                       />
@@ -288,16 +293,16 @@ watch(
                     <LazyCellAttachmentImage
                       v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
                       :key="`carousel-${record.row.id}-${index}`"
-                      class="h-52 border-b-1 border-gray-200 object-cover"
+                      class="h-52 object-cover"
                       :srcs="getPossibleAttachmentSrc(attachment)"
                     />
                   </template>
                 </a-carousel>
-                <div v-else class="h-52 w-full !flex flex-row items-center justify-center">
+                <div v-else class="h-52 w-full !flex flex-row !border-b-1 !border-gray-200 items-center justify-center">
                   <img class="object-contain w-[48px] h-[48px]" src="~assets/icons/FileIconImageBox.png" />
                 </div>
               </template>
-              <h2 v-if="displayField" class="text-lg font-bold">
+              <h2 v-if="displayField" class="text-base mt-6 mx-3 font-bold">
                 <LazySmartsheetVirtualCell
                   v-if="isVirtualCol(displayField)"
                   v-model="record.row[displayField.title]"
@@ -317,10 +322,7 @@ watch(
               </h2>
 
               <div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
-                <div
-                  v-if="!isRowEmpty(record, col) || isLTAR(col.uidt, col.colOptions)"
-                  class="flex flex-col ml-[-4px] rounded-lg w-full"
-                >
+                <div class="flex flex-col mx-2 !mb-2 rounded-lg w-full">
                   <div class="flex flex-row w-full justify-start scale-75">
                     <div class="w-full pb-1 text-gray-300">
                       <LazySmartsheetHeaderVirtualCell
@@ -334,7 +336,7 @@ watch(
                     </div>
                   </div>
 
-                  <div class="flex flex-row w-full pb-2 text-gray-700 pl-1 items-center justify-start">
+                  <div class="flex flex-row w-full text-gray-700 pl-1 items-center justify-start">
                     <LazySmartsheetVirtualCell
                       v-if="isVirtualCol(col)"
                       v-model="record.row[col.title]"
@@ -389,54 +391,35 @@ watch(
 
 <style scoped>
 .nc-gallery-container {
-  grid-auto-rows: 1fr;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-}
-
-.ant-card-body {
-  @apply !p-0;
+  @apply auto-rows-[1fr] grid-cols-[repeat(auto-fit,minmax(250px,1fr))];
 }
 
 :deep(.slick-dots li button) {
-  background-color: black;
+  @apply !bg-black;
 }
 
 .ant-carousel.gallery-carousel :deep(.slick-dots) {
-  @apply !w-auto;
-  position: absolute;
+  @apply !w-auto absolute h-auto bottom-[-15px] absolute h-auto;
   height: auto;
-  bottom: 3;
 }
 
 .ant-carousel.gallery-carousel :deep(.slick-dots li div > div) {
-  @apply rounded-full;
-  background: #d9d9d9;
-  border: 0;
-  color: transparent;
-  cursor: pointer;
-  display: block;
+  @apply rounded-full border-0 cursor-pointer block opacity-100 p-0 outline-none transition-all duration-500 text-transparent h-2 w-2 bg-[#d9d9d9];
   font-size: 0;
-  height: 8px;
-  opacity: 1;
-  outline: none;
-  padding: 0;
-  transition: all 0.5s;
-  width: 8px;
 }
 
 .ant-carousel.gallery-carousel :deep(.slick-dots li.slick-active div > div) {
-  @apply bg-brand-500;
-  opacity: 1;
+  @apply bg-brand-500 opacity-100;
 }
 
 .ant-carousel.gallery-carousel :deep(.slick-dots li) {
   @apply !w-auto;
 }
 .ant-carousel.gallery-carousel :deep(.slick-prev) {
-  left: 0;
+  @apply left-0;
 }
 
 .ant-carousel.gallery-carousel :deep(.slick-next) {
-  right: 0;
+  @apply right-0;
 }
 </style>

From cacacb92c1c3d1b167c3fd5b5aefcc0d3b7f88aa Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Sep 2023 15:55:04 +0530
Subject: [PATCH 06/13] fix: placeholder for empty columns

---
 packages/nc-gui/components/smartsheet/Gallery.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index d25ac05592..2834ea2bc6 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -322,7 +322,7 @@ watch(
               </h2>
 
               <div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
-                <div class="flex flex-col mx-2 !mb-2 rounded-lg w-full">
+                <div class="flex flex-col ml-2 !pr-3.5 !mb-2 rounded-lg w-full">
                   <div class="flex flex-row w-full justify-start scale-75">
                     <div class="w-full pb-1 text-gray-300">
                       <LazySmartsheetHeaderVirtualCell
@@ -336,7 +336,7 @@ watch(
                     </div>
                   </div>
 
-                  <div class="flex flex-row w-full text-gray-700 pl-1 items-center justify-start">
+                  <div v-if="!isRowEmpty(record, col)" class="flex flex-row w-full text-gray-700 px-1 items-center justify-start">
                     <LazySmartsheetVirtualCell
                       v-if="isVirtualCol(col)"
                       v-model="record.row[col.title]"
@@ -352,6 +352,9 @@ watch(
                       :read-only="true"
                     />
                   </div>
+                  <div v-else class="flex flex-row w-full h-[1.375rem] pl-1 items-center justify-start">
+                    <span class="bg-gray-200 h-2 w-16 rounded-md"></span>
+                  </div>
                 </div>
               </div>
             </a-card>

From bcc090346bc1f8c9e1b23081614f52aae1aa3250 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Sep 2023 16:10:28 +0530
Subject: [PATCH 07/13] fix: open expanded on Image click

---
 .../nc-gui/components/smartsheet/Gallery.vue     | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 2834ea2bc6..1615073b58 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -148,9 +148,8 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
 
 const expandFormClick = async (e: MouseEvent, row: RowType) => {
   const target = e.target as HTMLElement
-  if (target && !target.closest('.gallery-carousel')) {
-    expandForm(row)
-  }
+  if (target.closest('.arrow')) return
+  expandForm(row)
 }
 
 openNewRecordFormHook?.on(async () => {
@@ -263,7 +262,6 @@ watch(
                   v-if="!reloadAttachments && attachments(record).length"
                   class="gallery-carousel !border-b-1 !border-gray-200"
                   arrows
-                  @click="expandFormClick($event, record)"
                 >
                   <template #customPaging>
                     <a>
@@ -274,7 +272,7 @@ watch(
                   </template>
 
                   <template #prevArrow>
-                    <div class="z-10">
+                    <div class="z-10 arrow">
                       <MdiChevronLeft
                         class="text-gray-700 w-6 h-6 absolute left-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition"
                       />
@@ -282,7 +280,7 @@ watch(
                   </template>
 
                   <template #nextArrow>
-                    <div class="z-10">
+                    <div class="z-10 arrow">
                       <MdiChevronRight
                         class="text-gray-700 w-6 h-6 absolute right-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition"
                       />
@@ -295,6 +293,12 @@ watch(
                       :key="`carousel-${record.row.id}-${index}`"
                       class="h-52 object-cover"
                       :srcs="getPossibleAttachmentSrc(attachment)"
+                      @click="
+                        () => {
+                          console.log('hereeeeee')
+                          expandFormClick($event, record)
+                        }
+                      "
                     />
                   </template>
                 </a-carousel>

From 8fd5aa9feff9a06be606b2503dea36eb4dea131c Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Wed, 20 Sep 2023 18:07:03 +0530
Subject: [PATCH 08/13] fix(api): include cover image in gallery view

---
 packages/nocodb/src/helpers/getAst.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/nocodb/src/helpers/getAst.ts b/packages/nocodb/src/helpers/getAst.ts
index 52acc65ece..3b3b676b0e 100644
--- a/packages/nocodb/src/helpers/getAst.ts
+++ b/packages/nocodb/src/helpers/getAst.ts
@@ -5,7 +5,7 @@ import type {
   LookupColumn,
   Model,
 } from '~/models';
-import { View } from '~/models';
+import { GalleryView, View } from '~/models';
 
 const getAst = async ({
   query,
@@ -32,6 +32,12 @@ const getAst = async ({
   dependencyFields.nested = dependencyFields.nested || {};
   dependencyFields.fieldsSet = dependencyFields.fieldsSet || new Set();
 
+  let coverImageId;
+  const gallery = await GalleryView.get(view.id);
+  if (gallery) {
+    coverImageId = gallery.fk_cover_image_col_id;
+  }
+
   if (!model.columns?.length) await model.getColumns();
 
   // extract only pk and pv
@@ -59,7 +65,7 @@ const getAst = async ({
   }
 
   let allowedCols = null;
-  if (view)
+  if (view) {
     allowedCols = (await View.getColumns(view.id)).reduce(
       (o, c) => ({
         ...o,
@@ -67,6 +73,10 @@ const getAst = async ({
       }),
       {},
     );
+    if (coverImageId) {
+      allowedCols[coverImageId] = 1;
+    }
+  }
 
   const ast = await model.columns.reduce(async (obj, col: Column) => {
     let value: number | boolean | { [key: string]: any } = 1;

From b11c4cda356a6f83b2d11d6d03d996c38e0b7d10 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Sep 2023 18:43:39 +0530
Subject: [PATCH 09/13] fix: update fix

---
 .../components/cell/attachment/index.vue      |  7 ++++--
 .../nc-gui/components/smartsheet/Gallery.vue  | 22 ++++++++-----------
 packages/nocodb/src/helpers/getAst.ts         |  8 ++++---
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 4c4a35a267..5322f47eaa 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -7,6 +7,7 @@ import {
   CurrentCellInj,
   DropZoneRef,
   IsExpandedFormOpenInj,
+  IsGalleryInj,
   RowHeightInj,
   iconMap,
   inject,
@@ -43,6 +44,8 @@ const currentCellRef = inject(CurrentCellInj, dropZoneInjection.value)
 
 const isLockedMode = inject(IsLockedInj, ref(false))
 
+const isGallery = inject(IsGalleryInj, ref(false))
+
 const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
 
 const { isSharedForm } = useSmartsheetStoreOrThrow()!
@@ -200,8 +203,8 @@ const rowHeight = inject(RowHeightInj, ref())
     <template v-if="visibleItems.length">
       <div
         ref="sortableRef"
-        :class="{ dragging, 'justify-center': !isExpandedForm }"
-        class="flex cursor-pointer items-center flex-wrap gap-2 py-1.5 scrollbar-thin-dull overflow-hidden mt-0 items-start"
+        :class="{ 'justify-center': !isExpandedForm && !isGallery }"
+        class="flex cursor-pointer w-full items-center flex-wrap gap-2 py-1.5 scrollbar-thin-dull overflow-hidden mt-0 items-start"
         :style="{
           maxHeight: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
         }"
diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 1615073b58..addd74a6d4 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -71,9 +71,7 @@ const router = useRouter()
 
 const { getPossibleAttachmentSrc } = useAttachment()
 
-const fieldsWithoutCover = computed(() =>
-  fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id && !isPrimary(f)),
-)
+const fieldsWithoutDisplay = computed(() => fields.value.filter((f) => !isPrimary(f)))
 
 const displayField = computed(() => meta.value?.columns?.find((c) => c.pv) ?? null)
 
@@ -148,7 +146,7 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
 
 const expandFormClick = async (e: MouseEvent, row: RowType) => {
   const target = e.target as HTMLElement
-  if (target.closest('.arrow')) return
+  if (target.closest('.arrow') || target.closest('.slick-dots')) return
   expandForm(row)
 }
 
@@ -293,12 +291,7 @@ watch(
                       :key="`carousel-${record.row.id}-${index}`"
                       class="h-52 object-cover"
                       :srcs="getPossibleAttachmentSrc(attachment)"
-                      @click="
-                        () => {
-                          console.log('hereeeeee')
-                          expandFormClick($event, record)
-                        }
-                      "
+                      @click="expandFormClick($event, record)"
                     />
                   </template>
                 </a-carousel>
@@ -325,8 +318,8 @@ watch(
                 />
               </h2>
 
-              <div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
-                <div class="flex flex-col ml-2 !pr-3.5 !mb-2 rounded-lg w-full">
+              <div v-for="col in fieldsWithoutDisplay" :key="`record-${record.row.id}-${col.id}`">
+                <div class="flex flex-col ml-2 !pr-3.5 !mb-[0.5rem] rounded-lg w-full">
                   <div class="flex flex-row w-full justify-start scale-75">
                     <div class="w-full pb-1 text-gray-300">
                       <LazySmartsheetHeaderVirtualCell
@@ -340,7 +333,10 @@ watch(
                     </div>
                   </div>
 
-                  <div v-if="!isRowEmpty(record, col)" class="flex flex-row w-full text-gray-700 px-1 items-center justify-start">
+                  <div
+                    v-if="!isRowEmpty(record, col)"
+                    class="flex flex-row w-full text-gray-700 px-1 mt-[-0.25rem] items-center justify-start"
+                  >
                     <LazySmartsheetVirtualCell
                       v-if="isVirtualCol(col)"
                       v-model="record.row[col.title]"
diff --git a/packages/nocodb/src/helpers/getAst.ts b/packages/nocodb/src/helpers/getAst.ts
index 3b3b676b0e..1ecf513a76 100644
--- a/packages/nocodb/src/helpers/getAst.ts
+++ b/packages/nocodb/src/helpers/getAst.ts
@@ -33,9 +33,11 @@ const getAst = async ({
   dependencyFields.fieldsSet = dependencyFields.fieldsSet || new Set();
 
   let coverImageId;
-  const gallery = await GalleryView.get(view.id);
-  if (gallery) {
-    coverImageId = gallery.fk_cover_image_col_id;
+  if (view) {
+    const gallery = await GalleryView.get(view.id);
+    if (gallery) {
+      coverImageId = gallery.fk_cover_image_col_id;
+    }
   }
 
   if (!model.columns?.length) await model.getColumns();

From 0dbd47bd275d191de1a72fb761d43933eac32f6b Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Sep 2023 19:14:36 +0530
Subject: [PATCH 10/13] fix: style

---
 packages/nc-gui/components/smartsheet/Gallery.vue   | 2 +-
 packages/nc-gui/components/virtual-cell/Formula.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index addd74a6d4..d485545f74 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -319,7 +319,7 @@ watch(
               </h2>
 
               <div v-for="col in fieldsWithoutDisplay" :key="`record-${record.row.id}-${col.id}`">
-                <div class="flex flex-col ml-2 !pr-3.5 !mb-[0.5rem] rounded-lg w-full">
+                <div class="flex flex-col ml-2 !pr-3.5 !mb-[0.75rem] rounded-lg w-full">
                   <div class="flex flex-row w-full justify-start scale-75">
                     <div class="w-full pb-1 text-gray-300">
                       <LazySmartsheetHeaderVirtualCell
diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index 0f100c0e19..dab1e7e05c 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -29,7 +29,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
       <span>ERR!</span>
     </a-tooltip>
 
-    <div v-else class="p-2" @dblclick="activateShowEditNonEditableFieldWarning">
+    <div v-else class="py-2" @dblclick="activateShowEditNonEditableFieldWarning">
       <div v-if="urls" v-html="urls" />
 
       <div v-else>{{ result }}</div>

From e4d7f95fe9793bf02215087e2efe64f00e105389 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Sep 2023 19:50:31 +0530
Subject: [PATCH 11/13] fix: qr alignment

---
 .../nc-gui/components/virtual-cell/QrCode.vue    |  7 +++++--
 .../virtual-cell/barcode/JsBarcodeWrapper.vue    | 16 ++++++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/QrCode.vue b/packages/nc-gui/components/virtual-cell/QrCode.vue
index dd0d9054f2..2cf8879dd7 100644
--- a/packages/nc-gui/components/virtual-cell/QrCode.vue
+++ b/packages/nc-gui/components/virtual-cell/QrCode.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { useQRCode } from '@vueuse/integrations/useQRCode'
 import type QRCode from 'qrcode'
-import { RowHeightInj, computed, inject, ref } from '#imports'
+import { IsGalleryInj, RowHeightInj, computed, inject, ref } from '#imports'
 
 const maxNumberOfAllowedCharsForQrValue = 2000
 
 const cellValue = inject(CellValueInj)
 
+const isGallery = inject(IsGalleryInj, ref(false))
+
 const qrValue = computed(() => String(cellValue?.value))
 
 const tooManyCharsForQrCode = computed(() => qrValue?.value.length > maxNumberOfAllowedCharsForQrValue)
@@ -36,6 +38,7 @@ const qrCodeLarge = useQRCode(qrValue, {
 const modalVisible = ref(false)
 
 const showQrModal = (ev: MouseEvent) => {
+  if (isGallery.value) return
   ev.stopPropagation()
   modalVisible.value = true
 }
@@ -65,7 +68,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
   </div>
   <img
     v-if="showQrCode && rowHeight"
-    class="mx-auto"
+    :class="{ 'mx-auto': !isGallery }"
     :style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
     :src="qrCode"
     alt="QR Code"
diff --git a/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue b/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue
index 4799b4a5d7..95ec4fba0d 100644
--- a/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue
+++ b/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import JsBarcode from 'jsbarcode'
-import { onMounted } from '#imports'
+import { IsGalleryInj, onMounted } from '#imports'
 
 const props = defineProps({
   barcodeValue: { type: String, required: true },
@@ -10,6 +10,8 @@ const props = defineProps({
 
 const emit = defineEmits(['onClickBarcode'])
 
+const isGallery = inject(IsGalleryInj, ref(false))
+
 const barcodeSvgRef = ref<HTMLElement>()
 const errorForCurrentInput = ref(false)
 
@@ -33,6 +35,7 @@ const generate = () => {
 }
 
 const onBarcodeClick = (ev: MouseEvent) => {
+  if (isGallery.value) return
   ev.stopPropagation()
   emit('onClickBarcode')
 }
@@ -42,6 +45,15 @@ onMounted(generate)
 </script>
 
 <template>
-  <svg v-show="!errorForCurrentInput" ref="barcodeSvgRef" class="w-full" data-testid="barcode" @click="onBarcodeClick"></svg>
+  <svg
+    v-show="!errorForCurrentInput"
+    ref="barcodeSvgRef"
+    :class="{
+      'w-full': !isGallery,
+      'w-auto': isGallery,
+    }"
+    data-testid="barcode"
+    @click="onBarcodeClick"
+  ></svg>
   <slot v-if="errorForCurrentInput" name="barcodeRenderError" />
 </template>

From 1c658440365c2a14df3ca8b99544df0fbe37b906 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Sep 2023 19:52:39 +0530
Subject: [PATCH 12/13] fix: attachment in gallery

---
 packages/nc-gui/components/cell/attachment/index.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 5322f47eaa..d5e2471b3e 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -218,7 +218,12 @@ const rowHeight = inject(RowHeightInj, ref())
               <div
                 class="nc-attachment flex items-center flex-col flex-wrap justify-center"
                 :class="{ 'ml-2': active }"
-                @click.stop="selectedImage = item"
+                @click="
+                  () => {
+                    if (isGallery) return
+                    selectedImage = item
+                  }
+                "
               >
                 <LazyCellAttachmentImage
                   :alt="item.title || `#${i}`"

From bfa3c8b99bbe707e170c7b46a9e9840b54b74ca5 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Thu, 21 Sep 2023 10:49:17 +0530
Subject: [PATCH 13/13] test: fix

---
 tests/playwright/pages/Dashboard/ViewSidebar/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/pages/Dashboard/ViewSidebar/index.ts b/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
index cdc733a690..b319bf4eee 100644
--- a/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
+++ b/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
@@ -59,7 +59,7 @@ export class ViewSidebarPage extends BasePage {
     await this.rootPage.locator('input[id="form_item_title"]:visible').waitFor({ state: 'visible' });
     await this.rootPage.locator('input[id="form_item_title"]:visible').fill(title);
     const submitAction = () =>
-      this.rootPage.locator('.ant-modal-content').locator('button.ant-btn.ant-btn-primary').click();
+      this.rootPage.locator('.ant-modal-content').locator('button.ant-btn.ant-btn-primary').click({ force: true });
     await this.waitForResponse({
       httpMethodsToMatch: ['POST'],
       requestUrlPathToMatch: '/api/v1/db/meta/tables/',