From 36bc7dd3da0788fda38292689670b991675023f8 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 2 Nov 2023 09:19:29 +0000
Subject: [PATCH 1/3] fix: Handled lookup overflow issue

---
 .../nc-gui/components/virtual-cell/Lookup.vue | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 2003dc4ead..cbe3a02382 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -25,6 +25,10 @@ const meta = inject(MetaInj, ref())
 
 const cellValue = inject(CellValueInj, ref())
 
+const rowHeight = inject(RowHeightInj, ref(1) as any)
+
+provide(RowHeightInj, ref(1) as any)
+
 const relationColumn = computed(
   () =>
     meta.value?.columns?.find((c: ColumnType) => c.id === (column.value?.colOptions as LookupType)?.fk_relation_column_id) as
@@ -80,8 +84,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 * 1.8}rem` : `2.5rem` }"
+    @dblclick="activateShowEditNonEditableFieldWarning"
+  >
+    <div
+      class="h-full w-full flex gap-1 p-1"
+      :class="{
+        '!overflow-x-auto nc-scrollbar-x-md !overflow-y-hidden': rowHeight === 1,
+      }"
+    >
       <template v-if="lookupColumn">
         <!-- Render virtual cell -->
         <div v-if="isVirtualCol(lookupColumn)">
@@ -114,14 +127,25 @@ 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"
+              :class="{
+                'nc-scrollbar-md ': rowHeight !== 1,
+              }"
+            >
+              <div
+                class="flex gap-1.5 w-full"
+                :class="{
+                  'flex-wrap ': rowHeight !== 1,
+                  '!overflow-x-auto nc-scrollbar-x-md !overflow-y-hidden': rowHeight === 1,
+                }"
+              >
                 <div
                   v-for="(v, i) of arrValue"
                   :key="i"
-                  class="min-w-max"
+                  class="min-h-7.5 pt-0.75"
                   :class="{
-                    'bg-gray-100 px-1 rounded-full flex-1': !isAttachment(lookupColumn),
+                    'bg-gray-100 px-1 rounded-full': !isAttachment(lookupColumn),
                     'border-gray-200 rounded border-1': ![UITypes.Attachment, UITypes.MultiSelect, UITypes.SingleSelect].includes(
                       lookupColumn.uidt,
                     ),
@@ -133,6 +157,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
                     :edit-enabled="false"
                     :virtual="true"
                     :read-only="true"
+                    class="!max-w-40 !min-w-20 !w-auto px-2"
                   />
                 </div>
               </div>

From 22d836f439c524d267673c8f9554d22f659f3403 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 2 Nov 2023 09:19:29 +0000
Subject: [PATCH 2/3] fix: Handled attachment cell case and fixed an issue with
 empty pill coming up

---
 .../nc-gui/components/virtual-cell/Lookup.vue | 43 +++++++++++++------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index cbe3a02382..26ee0ef9e8 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -25,9 +25,13 @@ 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, ref(1) as any)
+provide(RowHeightInj, providedHeightRef)
 
 const relationColumn = computed(
   () =>
@@ -60,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 []
 
@@ -68,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]
 })
@@ -86,7 +99,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
 <template>
   <div
     class="h-full w-full"
-    :style="{ height: rowHeight && rowHeight !== 1 ? `${rowHeight * 1.8}rem` : `2.5rem` }"
+    :style="{ height: rowHeight && rowHeight !== 1 ? `${rowHeight * 2}rem` : `2.85rem` }"
     @dblclick="activateShowEditNonEditableFieldWarning"
   >
     <div
@@ -130,25 +143,27 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
             <div
               class="max-h-full max-w-full w-full"
               :class="{
-                'nc-scrollbar-md ': rowHeight !== 1,
+                'nc-scrollbar-md ': rowHeight !== 1 && !isAttachment(lookupColumn),
               }"
             >
               <div
                 class="flex gap-1.5 w-full"
                 :class="{
-                  'flex-wrap ': rowHeight !== 1,
-                  '!overflow-x-auto nc-scrollbar-x-md !overflow-y-hidden': rowHeight === 1,
+                  'flex-wrap': rowHeight !== 1 && !isAttachment(lookupColumn),
+                  '!overflow-x-auto nc-scrollbar-x-md !overflow-y-hidden': rowHeight === 1 || isAttachment(lookupColumn),
                 }"
               >
                 <div
                   v-for="(v, i) of arrValue"
                   :key="i"
-                  class="min-h-7.5 pt-0.75"
                   :class="{
-                    'bg-gray-100 px-1 rounded-full': !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
@@ -157,7 +172,11 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
                     :edit-enabled="false"
                     :virtual="true"
                     :read-only="true"
-                    class="!max-w-40 !min-w-20 !w-auto px-2"
+                    class=""
+                    :class="{
+                      'min-h-0 min-w-0': isAttachment(lookupColumn),
+                      '!max-w-40 !min-w-20 !w-auto px-2': !isAttachment(lookupColumn),
+                    }"
                   />
                 </div>
               </div>

From 96e925fe351935375b3484c0c72b023ca45a2449 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 2 Nov 2023 09:19:29 +0000
Subject: [PATCH 3/3] fix: Hidden lookup cell scroll bar unless on hover

---
 .../nc-gui/components/virtual-cell/Lookup.vue | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 26ee0ef9e8..87dd4080be 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -105,7 +105,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
     <div
       class="h-full w-full flex gap-1 p-1"
       :class="{
-        '!overflow-x-auto nc-scrollbar-x-md !overflow-y-hidden': rowHeight === 1,
+        '!overflow-x-auto nc-cell-lookup-scroll nc-scrollbar-x-md !overflow-y-hidden': rowHeight === 1,
       }"
     >
       <template v-if="lookupColumn">
@@ -141,7 +141,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
           <!-- For attachment cell avoid adding chip style -->
           <template v-else>
             <div
-              class="max-h-full max-w-full w-full"
+              class="max-h-full max-w-full w-full nc-cell-lookup-scroll"
               :class="{
                 'nc-scrollbar-md ': rowHeight !== 1 && !isAttachment(lookupColumn),
               }"
@@ -150,7 +150,8 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
                 class="flex gap-1.5 w-full"
                 :class="{
                   'flex-wrap': rowHeight !== 1 && !isAttachment(lookupColumn),
-                  '!overflow-x-auto nc-scrollbar-x-md !overflow-y-hidden': rowHeight === 1 || isAttachment(lookupColumn),
+                  '!overflow-x-auto nc-cell-lookup-scroll nc-scrollbar-x-md !overflow-y-hidden':
+                    rowHeight === 1 || isAttachment(lookupColumn),
                 }"
               >
                 <div
@@ -193,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>