fix: lookup rendering

packages/nc-gui/components/cell/User.vue

@@ -237,7 +237,7 @@ const handleClose = (e: MouseEvent) => {
     isOpen.value &&
     aselect.value &&
     !aselect.value.$el.contains(e.target) &&
-    !document.querySelector('.nc-dropdown-multi-select-cell.active')?.contains(e.target as Node)
+    !document.querySelector('.nc-dropdown-user-select-cell.active')?.contains(e.target as Node)
   ) {
     // loose focus when clicked outside
     isEditable.value = false
@@ -258,7 +258,7 @@ const filterOption = (input: string, option: any) => {
 </script>
 
 <template>
-  <div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
+  <div class="nc-user-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
     <div
       v-if="!active || isPublic"
       class="flex flex-wrap"
@@ -301,7 +301,7 @@ const filterOption = (input: string, option: any) => {
       :open="isOpen && editAllowed"
       :disabled="readOnly || !editAllowed"
       :class="{ 'caret-transparent': !hasEditRoles }"
-      :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
+      :dropdown-class-name="`nc-dropdown-user-select-cell ${isOpen ? 'active' : ''}`"
       :filter-option="filterOption"
       @search="search"
       @keydown.stop
@@ -396,7 +396,7 @@ const filterOption = (input: string, option: any) => {
 }
 
 .rounded-tag {
-  @apply py-0 px-[12px] rounded-[12px];
+  @apply bg-gray-200 py-0 px-[12px] rounded-[12px];
 }
 
 :deep(.ant-tag) {
@@ -415,7 +415,7 @@ const filterOption = (input: string, option: any) => {
   @apply flex-nowrap overflow-hidden;
 }
 
-.nc-multi-select:not(.read-only) {
+.nc-user-select:not(.read-only) {
   :deep(.ant-select-selector),
   :deep(.ant-select-selector input) {
     @apply "!cursor-pointer";

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

@@ -1586,7 +1586,7 @@ onKeyStroke('ArrowDown', onDown)
                       @dblclick="makeEditable(row, columnObj)"
                       @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
                     >
-                      <div v-if="!switchingTab" class="w-full h-full">
+                      <div v-if="!switchingTab" class="w-full">
                         <LazySmartsheetVirtualCell
                           v-if="isVirtualCol(columnObj) && columnObj.title"
                           v-model="row.row[columnObj.title]"

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

@@ -97,20 +97,16 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
 </script>
 
 <template>
-  <div
-    class="h-full w-full nc-lookup-cell"
-    :style="{ height: rowHeight && rowHeight !== 1 ? `${rowHeight * 2}rem` : `2.85rem` }"
-    @dblclick="activateShowEditNonEditableFieldWarning"
-  >
+  <div class="h-full w-full nc-lookup-cell" @dblclick="activateShowEditNonEditableFieldWarning">
     <div
-      class="h-full w-full flex gap-1 p-1"
+      class="h-full w-full flex gap-1"
       :class="{
         '!overflow-x-auto nc-cell-lookup-scroll nc-scrollbar-x-md !overflow-y-hidden': rowHeight === 1,
       }"
     >
       <template v-if="lookupColumn">
         <!-- Render virtual cell -->
-        <div v-if="isVirtualCol(lookupColumn)" class="flex">
+        <div v-if="isVirtualCol(lookupColumn)" class="flex h-full">
           <!-- If non-belongs-to LTAR column then pass the array value, else iterate and render -->
           <template
             v-if="
@@ -151,7 +147,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
               }"
             >
               <div
-                class="flex gap-1.5 w-full"
+                class="flex gap-1.5 w-full h-full py-[3px]"
                 :class="{
                   'flex-wrap': rowHeight !== 1 && !isAttachment(lookupColumn),
                   '!overflow-x-auto nc-cell-lookup-scroll nc-scrollbar-x-md !overflow-y-hidden':
@@ -162,11 +158,12 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
                   v-for="(v, i) of arrValue"
                   :key="i"
                   :class="{
-                    'bg-gray-100 px-1 rounded-full min-h-7.5': !isAttachment(lookupColumn),
-                    'border-gray-200 rounded border-1 pt-0.75': ![
+                    'bg-gray-100 rounded-full': !isAttachment(lookupColumn),
+                    'border-gray-200 rounded border-1': ![
                       UITypes.Attachment,
                       UITypes.MultiSelect,
                       UITypes.SingleSelect,
+                      UITypes.User,
                     ].includes(lookupColumn.uidt),
                     'min-h-0 min-w-0': isAttachment(lookupColumn),
                   }"
@@ -180,7 +177,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
                     class=""
                     :class="{
                       'min-h-0 min-w-0': isAttachment(lookupColumn),
-                      '!max-w-40 !min-w-20 !w-auto px-2': !isAttachment(lookupColumn),
+                      '!min-w-20 !w-auto pl-2': !isAttachment(lookupColumn),
                     }"
                   />
                 </div>