fix: gallery view css

Signed-off-by: mertmit <mertmit99@gmail.com>

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

@@ -95,28 +95,19 @@ openNewRecordFormHook?.on(async () => {
 </script>
 
 <template>
-  <div class="flex flex-col h-full w-full">
-    <div class="nc-gallery-container min-h-0 flex-1 grid grid-cols-4 gap-4 my-4 px-3 overflow-auto">
+  <div class="flex flex-col h-full w-full overflow-auto">
+    <div class="nc-gallery-container grid w-full min-h-0 flex-1 gap-x-2 my-4 px-3">
       <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col" @click="expandForm(record)">
         <Row :row="record">
-          <a-card hoverable class="!rounded-lg h-full">
+          <a-card hoverable class="!rounded-lg h-full overflow-hidden break-all">
             <template #cover>
               <a-carousel v-if="attachments(record).length !== 0" autoplay>
-                <img
-                  v-for="(attachment, index) in attachments(record)"
-                  :key="index"
-                  class="h-52 rounded-t-lg"
-                  :src="attachment.url"
-                />
+                <img v-for="(attachment, index) in attachments(record)" :key="index" class="h-52" :src="attachment.url" />
               </a-carousel>
               <ImageIcon v-else class="w-full h-48 my-4 text-cool-gray-200" />
             </template>
 
-            <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 v-for="col in fields" :key="col.id" 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" />
@@ -149,6 +140,6 @@ openNewRecordFormHook?.on(async () => {
 
 <style scoped>
 .nc-gallery-container {
-  overflow: auto;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
 }
 </style>