fix/fixed styling of gallery view and removed some case of empty record coming up

packages/nc-gui-v2/components/smartsheet/Gallery.vue

@@ -43,34 +43,44 @@ watch(
   },
   { immediate: true },
 )
+
+const isRowEmpty = (record: any, col: any) => {
+  const val = record.row[col.title]
+  if (!val) return true
+
+  return Array.isArray(val) && val.length === 0
+}
 </script>
 
 <template>
   <div class="grid grid-cols-4 gap-x-4 gap-y-4 pt-4 overflow-y-scroll h-full px-3">
-    <div v-for="(record, i) in data" :key="i" class="flex flex-col">
+    <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col">
-      <a-card hoverable class="!rounded-lg">
+      <a-card hoverable class="!rounded-lg h-full">
         <template #cover>
           <img v-if="record.row[coverImageColumn?.title]" class="h-52 rounded-t-lg" :src="coverUrl(record)" />
           <ImageIcon v-else class="w-full h-48 my-4 text-cool-gray-200" />
         </template>
-        <template v-for="(col, colIndex) in fields" :key="colIndex">
-          <div class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full">
-            <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
-              <div class="w-full text-gray-600">
-                <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
-                <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
-              </div>
-            </div>
 
-            <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
+        <div
-              <div v-if="!record.row[col.title]" class="h-3 bg-gray-200 px-5 rounded-lg"></div>
+          v-for="(col, colIndex) in fields"
+          :key="colIndex"
+          class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
+        >
+          <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
+            <div class="w-full text-gray-600">
+              <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
+              <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+            </div>
+          </div>
 
+          <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
+            <div v-if="isRowEmpty(record, col)" class="h-3 bg-gray-200 px-5 rounded-lg"></div>
+            <template v-else>
               <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="record.row[col.title]" :column="col" />
-
               <SmartsheetCell v-else v-model="record.row[col.title]" :column="col" :edit-enabled="false" />
-            </div>
+            </template>
           </div>
-        </template>
+        </div>
       </a-card>
     </div>
   </div>