fix: min width for attachment column

packages/nc-gui/components/cell/attachment/AttachFile.vue

@@ -51,6 +51,7 @@ watch(activeMenu, (newVal, oldValue) => {
         <NcMenu class="!h-full !bg-gray-50">
           <NcMenuItem
             key="local"
+            class="!hover:bg-gray-200 !hover:text-gray-800 rounded-md"
             :class="{
               'active-menu': activeMenu === 'local',
             }"
@@ -64,6 +65,7 @@ watch(activeMenu, (newVal, oldValue) => {
           <NcMenuItem
             v-if="!isPublic"
             key="url"
+            class="!hover:bg-gray-200 !hover:text-gray-800 rounded-md"
             :class="{
               'active-menu': activeMenu === 'url',
             }"
@@ -76,6 +78,7 @@ watch(activeMenu, (newVal, oldValue) => {
           </NcMenuItem>
           <NcMenuItem
             key="webcam"
+            class="!hover:bg-gray-200 !hover:text-gray-800 rounded-md"
             :class="{
               'active-menu': activeMenu === 'webcam',
             }"
@@ -115,7 +118,7 @@ watch(activeMenu, (newVal, oldValue) => {
 <style lang="scss">
 .nc-modal-attachment-create {
   .active-menu {
-    @apply !bg-gray-200 font-sembold text-brand-500 rounded-md;
+    @apply bg-brand-50 font-sembold text-brand-500 rounded-md;
   }
 }
 

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -128,6 +128,7 @@ const {
   isViewColumnsLoading: _isViewColumnsLoading,
   updateGridViewColumn,
   gridViewCols,
+  metaColumnById,
   resizingColOldWith,
 } = useViewColumnsOrThrow()
 
@@ -1102,12 +1103,33 @@ const saveOrUpdateRecords = async (
 // #Grid Resize
 const onresize = (colID: string | undefined, event: any) => {
   if (!colID) return
-  updateGridViewColumn(colID, { width: event.detail })
+
+  // Set 80px minimum width for attachment cells
+  if (metaColumnById.value[colID].uidt === UITypes.Attachment) {
+    const size = event.detail.split('px')[0]
+    if (+size < 80) {
+      updateGridViewColumn(colID, { width: '80px' })
+    } else {
+      updateGridViewColumn(colID, { width: event.detail })
+    }
+  } else {
+    updateGridViewColumn(colID, { width: event.detail })
+  }
 }
 
 const onXcResizing = (cn: string | undefined, event: any) => {
   if (!cn) return
-  gridViewCols.value[cn].width = `${event.detail}`
+  // Set 80px minimum width for attachment cells
+  if (metaColumnById.value[cn].uidt === UITypes.Attachment) {
+    const size = event.detail.split('px')[0]
+    if (+size < 80) {
+      gridViewCols.value[cn].width = '80px'
+    } else {
+      gridViewCols.value[cn].width = `${event.detail}`
+    }
+  } else {
+    gridViewCols.value[cn].width = `${event.detail}`
+  }
 }
 
 const onXcStartResizing = (cn: string | undefined, event: any) => {