refactor(gui): remove pk value from list item and reduce item height

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

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

@@ -143,13 +143,13 @@ const onClick = (row: Row) => {
           <a-card
             v-for="(row, i) of childrenList?.list ?? state?.[colTitle] ?? []"
             :key="i"
-            class="!my-4 hover:(!bg-gray-200/50 shadow-md)"
+            class="nc-nested-list-item !my-4 hover:(!bg-gray-200/50 shadow-md)"
             @click="onClick(row)"
           >
             <div class="flex items-center">
               <div class="flex-1 overflow-hidden min-w-0">
                 <VirtualCellComponentsItemChip :value="row[relatedTableDisplayValueProp]" :column="props.column" />
-                <span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
+<!--                <span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>-->
               </div>
 
               <div v-if="!readonly" class="flex gap-2">
@@ -208,4 +208,9 @@ const onClick = (row: Row) => {
 :deep(.ant-pagination-item a) {
   line-height: 21px !important;
 }
+
+
+:deep(.nc-nested-list-item .ant-card-body){
+  @apply !p-2
+}
 </style>

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

@@ -225,7 +225,7 @@ watch(vModel, (nextVal) => {
             v-for="(refRow, i) in childrenExcludedList?.list ?? []"
             :key="i"
             :ref="selectedRowIndex === i ? activeRow : null"
-            class="!my-4 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
+            class="nc-nested-list-item !my-4 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
             :class="{ 'nc-selected-row': selectedRowIndex === i }"
             @click="linkRow(refRow)"
           >
@@ -234,9 +234,9 @@ watch(vModel, (nextVal) => {
               :column="props.column"
               :show-unlink-button="false"
             />
-            <span class="hidden group-hover:(inline) text-gray-400 text-[11px] ml-1">
+<!--            <span class="hidden group-hover:(inline) text-gray-400 text-[11px] ml-1">-->
-              ({{ $t('labels.primaryKey') }} : {{ getRelatedTableRowId(refRow) }})
+<!--              ({{ $t('labels.primaryKey') }} : {{ getRelatedTableRowId(refRow) }})-->
-            </span>
+<!--            </span>-->
           </a-card>
         </div>
 
@@ -281,4 +281,8 @@ watch(vModel, (nextVal) => {
 :deep(.nc-selected-row) {
   @apply !ring;
 }
+
+:deep(.nc-nested-list-item .ant-card-body){
+  @apply !p-2
+}
 </style>