refactor: remove tag outline and reduce list item size

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/virtual-cell/components/ItemChip.vue

@@ -9,7 +9,6 @@ import {
   inject,
   isAttachment,
   ref,
-  renderValue,
   useExpandedFormDetached,
   useLTARStoreOrThrow,
 } from '#imports'
@@ -19,9 +18,10 @@ interface Props {
   item?: any
   column: any
   showUnlinkButton: boolean
+  border?: boolean
 }
 
-const { value, item, column, showUnlinkButton } = defineProps<Props>()
+const { value, item, column, showUnlinkButton, border = true } = defineProps<Props>()
 
 const emit = defineEmits(['unlink'])
 
@@ -84,9 +84,8 @@ export default {
             class="min-w-max"
             :class="{
               'px-1 rounded-full flex-1': !isAttachment(column),
-              'border-gray-200 rounded border-1': ![UITypes.Attachment, UITypes.MultiSelect, UITypes.SingleSelect].includes(
+              'border-gray-200 rounded border-1':
-                column.uidt,
+                border && ![UITypes.Attachment, UITypes.MultiSelect, UITypes.SingleSelect].includes(column.uidt),
-              ),
             }"
           >
             <LazySmartsheetCell :model-value="value" :column="column" :edit-enabled="false" :virtual="true" :read-only="true" />

packages/nc-gui/components/virtual-cell/components/ListChildItems.vue

@@ -148,7 +148,11 @@ const onClick = (row: Row) => {
           >
             <div class="flex items-center">
               <div class="flex-1 overflow-hidden min-w-0">
-                <VirtualCellComponentsItemChip :value="row[relatedTableDisplayValueProp]" :column="props.column" />
+                <VirtualCellComponentsItemChip
+                  :border="false"
+                  :value="row[relatedTableDisplayValueProp]"
+                  :column="props.column"
+                />
                 <!--                <span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span> -->
               </div>
 
@@ -210,6 +214,6 @@ const onClick = (row: Row) => {
 }
 
 :deep(.nc-nested-list-item .ant-card-body) {
-  @apply !p-2;
+  @apply !px-2 !py-1;
 }
 </style>

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -233,6 +233,7 @@ watch(vModel, (nextVal) => {
               :value="refRow[relatedTableDisplayValueProp]"
               :column="props.column"
               :show-unlink-button="false"
+              :border="false"
             />
             <!--            <span class="hidden group-hover:(inline) text-gray-400 text-[11px] ml-1"> -->
             <!--              ({{ $t('labels.primaryKey') }} : {{ getRelatedTableRowId(refRow) }}) -->
@@ -283,6 +284,6 @@ watch(vModel, (nextVal) => {
 }
 
 :deep(.nc-nested-list-item .ant-card-body) {
-  @apply !p-2;
+  @apply !px-2 !py-1;
 }
 </style>