Merge pull request #6865 from nocodb/nc-fix/lookup-overflow-fix

Nc fix/lookup overflow fix

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

@@ -25,6 +25,14 @@ const meta = inject(MetaInj, ref())
 
 const cellValue = inject(CellValueInj, ref())
 
+// Change the row height of the child cell under lookup
+// Other wise things like text will can take multi line tag
+const providedHeightRef = ref(1) as any
+
+const rowHeight = inject(RowHeightInj, ref(1) as any)
+
+provide(RowHeightInj, providedHeightRef)
+
 const relationColumn = computed(
   () =>
     meta.value?.columns?.find((c: ColumnType) => c.id === (column.value?.colOptions as LookupType)?.fk_relation_column_id) as
@@ -56,6 +64,14 @@ const lookupColumn = computed(
       | undefined,
 )
 
+watch([lookupColumn, rowHeight], () => {
+  if (lookupColumn.value && !isAttachment(lookupColumn.value)) {
+    providedHeightRef.value = 1
+  } else {
+    providedHeightRef.value = rowHeight.value
+  }
+})
+
 const arrValue = computed(() => {
   if (!cellValue.value) return []
 
@@ -64,7 +80,8 @@ const arrValue = computed(() => {
   if (lookupColumn.value?.uidt === UITypes.Attachment && relationColumn.value?.colOptions?.type === RelationTypes.BELONGS_TO)
     return [cellValue.value]
 
-  if (Array.isArray(cellValue.value)) return cellValue.value
+  // TODO: We are filtering null as cell value can be null. Find the root cause and fix it
+  if (Array.isArray(cellValue.value)) return cellValue.value.filter((v) => v !== null)
 
   return [cellValue.value]
 })
@@ -80,8 +97,17 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
 </script>
 
 <template>
-  <div class="h-full" @dblclick="activateShowEditNonEditableFieldWarning">
-    <div class="h-full flex gap-1 overflow-x-auto p-1">
+  <div
+    class="h-full w-full"
+    :style="{ height: rowHeight && rowHeight !== 1 ? `${rowHeight * 2}rem` : `2.85rem` }"
+    @dblclick="activateShowEditNonEditableFieldWarning"
+  >
+    <div
+      class="h-full w-full flex gap-1 p-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)">
@@ -114,17 +140,31 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
           </div>
           <!-- For attachment cell avoid adding chip style -->
           <template v-else>
-            <div class="flex flex-col">
-              <div class="flex gap-1.5">
+            <div
+              class="max-h-full max-w-full w-full nc-cell-lookup-scroll"
+              :class="{
+                'nc-scrollbar-md ': rowHeight !== 1 && !isAttachment(lookupColumn),
+              }"
+            >
+              <div
+                class="flex gap-1.5 w-full"
+                :class="{
+                  'flex-wrap': rowHeight !== 1 && !isAttachment(lookupColumn),
+                  '!overflow-x-auto nc-cell-lookup-scroll nc-scrollbar-x-md !overflow-y-hidden':
+                    rowHeight === 1 || isAttachment(lookupColumn),
+                }"
+              >
                 <div
                   v-for="(v, i) of arrValue"
                   :key="i"
-                  class="min-w-max"
                   :class="{
-                    'bg-gray-100 px-1 rounded-full flex-1': !isAttachment(lookupColumn),
-                    'border-gray-200 rounded border-1': ![UITypes.Attachment, UITypes.MultiSelect, UITypes.SingleSelect].includes(
-                      lookupColumn.uidt,
-                    ),
+                    'bg-gray-100 px-1 rounded-full min-h-7.5': !isAttachment(lookupColumn),
+                    'border-gray-200 rounded border-1 pt-0.75': ![
+                      UITypes.Attachment,
+                      UITypes.MultiSelect,
+                      UITypes.SingleSelect,
+                    ].includes(lookupColumn.uidt),
+                    'min-h-0 min-w-0': isAttachment(lookupColumn),
                   }"
                 >
                   <LazySmartsheetCell
@@ -133,6 +173,11 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
                     :edit-enabled="false"
                     :virtual="true"
                     :read-only="true"
+                    class=""
+                    :class="{
+                      'min-h-0 min-w-0': isAttachment(lookupColumn),
+                      '!max-w-40 !min-w-20 !w-auto px-2': !isAttachment(lookupColumn),
+                    }"
                   />
                 </div>
               </div>
@@ -149,3 +194,16 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
     </div>
   </div>
 </template>
+
+<style lang="scss">
+.nc-cell-lookup-scroll {
+  &::-webkit-scrollbar-thumb {
+    @apply bg-transparent;
+  }
+}
+.nc-cell-lookup-scroll:hover {
+  &::-webkit-scrollbar-thumb {
+    @apply bg-gray-200;
+  }
+}
+</style>