From e42a1fea170360dbad7d913cc81e050aad23062a Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Wed, 29 Nov 2023 17:50:08 +0530
Subject: [PATCH 01/20] fix : added tooltip for column fields

---
 .../smartsheet/expanded-form/index.vue        | 37 +++++++++----------
 .../components/smartsheet/header/Cell.vue     | 26 +++++++------
 .../smartsheet/header/VirtualCell.vue         |  6 +--
 3 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 4695736513..b48e13e25b 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -619,9 +619,7 @@ export default {
             'w-2/3': showRightSections,
           }"
         >
-          <div
-            class="flex flex-col flex-grow mt-2 h-full max-h-full nc-scrollbar-md pb-6 items-center w-full bg-white p-4 xs:p-0"
-          >
+          <div class="flex flex-col flex-grow mt-2 h-full max-h-full nc-scrollbar-md pb-6 w-full bg-white p-4 xs:p-0">
             <div
               v-for="(col, i) of fields"
               v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)"
@@ -632,24 +630,21 @@ export default {
               :data-testid="`nc-expand-col-${col.title}`"
             >
               <div class="flex items-start flex-row sm:(gap-x-6) xs:(flex-col w-full) nc-expanded-cell min-h-10">
-                <div class="w-48 xs:(w-full) mt-0.25 !h-[35px]">
+                <div class="flex-1 xs:(w-full) mt-0.25 !h-[35px]">
                   <LazySmartsheetHeaderVirtualCell
                     v-if="isVirtualCol(col)"
-                    class="nc-expanded-cell-header h-full"
+                    class="nc-expanded-cell-header h-full !max-w-80"
                     :column="col"
                   />
 
-                  <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" />
+                  <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header !max-w-80" :column="col" />
                 </div>
 
                 <template v-if="isLoading">
-                  <div
-                    v-if="isMobileMode"
-                    class="!h-8.5 !xs:h-12 !xs:bg-white !sm:mr-21 !w-60 mt-0.75 !rounded-lg !overflow-hidden"
-                  ></div>
+                  <div v-if="isMobileMode" class="!h-8.5 !xs:h-12 !xs:bg-white flex-1 mt-0.75 !rounded-lg !overflow-hidden"></div>
                   <a-skeleton-input
                     v-else
-                    class="!h-8.5 !xs:h-9.5 !xs:bg-white !sm:mr-21 !w-60 mt-0.75 !rounded-lg !overflow-hidden"
+                    class="!h-8.5 !xs:h-9.5 !xs:bg-white flex-1 mt-0.75 !rounded-lg !overflow-hidden"
                     active
                     size="small"
                   />
@@ -658,7 +653,7 @@ export default {
                   <SmartsheetDivDataCell
                     v-if="col.title"
                     :ref="i ? null : (el: any) => (cellWrapperEl = el)"
-                    class="bg-white rounded-lg !w-[20rem] !xs:w-full border-1 border-gray-200 overflow-hidden px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
+                    class="bg-white rounded-lg flex-1 !xs:w-full border-1 border-gray-200 overflow-hidden px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
                     :class="{
                       '!bg-gray-50 !px-0 !select-text': isReadOnlyVirtualCell(col),
                     }"
@@ -701,7 +696,7 @@ export default {
               </NcButton>
               <div class="flex-grow h-px ml-1 bg-gray-100"></div>
             </div>
-            <div v-if="hiddenFields.length > 0 && showHiddenFields" class="flex flex-col w-full mb-3 items-center">
+            <div v-if="hiddenFields.length > 0 && showHiddenFields" class="flex flex-col w-full mb-3">
               <div
                 v-for="(col, i) of hiddenFields"
                 v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)"
@@ -711,20 +706,24 @@ export default {
                 :data-testid="`nc-expand-col-${col.title}`"
               >
                 <div class="sm:gap-x-6 flex sm:flex-row xs:(flex-col) items-start min-h-10">
-                  <div class="sm:w-48 xs:w-full scale-110 !h-[35px]">
-                    <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" class="nc-expanded-cell-header" />
+                  <div class="flex-1 xs:w-full scale-110 !h-[35px]">
+                    <LazySmartsheetHeaderVirtualCell
+                      v-if="isVirtualCol(col)"
+                      :column="col"
+                      class="nc-expanded-cell-header max-w-80"
+                    />
 
-                    <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" />
+                    <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header max-w-80" :column="col" />
                   </div>
 
                   <template v-if="isLoading">
                     <div
                       v-if="isMobileMode"
-                      class="!h-8.5 !xs:h-9.5 !xs:bg-white !sm:mr-21 !w-60 mt-0.75 !rounded-lg !overflow-hidden"
+                      class="!h-8.5 !xs:h-9.5 !xs:bg-white flex-1 mt-0.75 !rounded-lg !overflow-hidden"
                     ></div>
                     <a-skeleton-input
                       v-else
-                      class="!h-8.5 !xs:h-12 !xs:bg-white !sm:mr-21 !w-60 mt-0.75 !rounded-lg !overflow-hidden"
+                      class="!h-8.5 !xs:h-12 !xs:bg-white flex-1 mt-0.75 !rounded-lg !overflow-hidden"
                       active
                       size="small"
                     />
@@ -733,7 +732,7 @@ export default {
                     <LazySmartsheetDivDataCell
                       v-if="col.title"
                       :ref="i ? null : (el: any) => (cellWrapperEl = el)"
-                      class="!bg-white rounded-lg !w-[20rem] border-1 overflow-hidden border-gray-200 px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
+                      class="!bg-white rounded-lg flex-1 border-1 overflow-hidden border-gray-200 px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
                     >
                       <LazySmartsheetVirtualCell
                         v-if="isVirtualCol(col)"
diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index 2c48516fe8..6dc9a9f6eb 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -90,18 +90,20 @@ const onClick = (e: Event) => {
         'self-start': isForm || isSurveyForm,
       }"
     />
-    <div
-      v-if="column"
-      class="name pl-1"
-      :class="{
-        'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu && !isExpandedForm,
-        'cursor-default': isForm || !isUIAllowed('fieldEdit') || hideMenu,
-        '!truncate': !isForm,
-      }"
-      :data-test-id="column.title"
-    >
-      {{ column.title }}
-    </div>
+    <a-tooltip placement="bottom" :title="column.title">
+      <div
+        v-if="column"
+        class="name pl-1"
+        :class="{
+          'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu && !isExpandedForm,
+          'cursor-default': isForm || !isUIAllowed('fieldEdit') || hideMenu,
+          '!truncate': !isForm,
+        }"
+        :data-test-id="column.title"
+      >
+        {{ column.title }}
+      </div>
+    </a-tooltip>
 
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>
 
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
index 9b0c4d390e..3722aac3c5 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
@@ -153,11 +153,11 @@ const openDropDown = (e: Event) => {
   >
     <LazySmartsheetHeaderVirtualCellIcon v-if="column && !props.hideIcon" />
 
-    <a-tooltip placement="bottom">
+    <a-tooltip placement="bottom" :title="column.title">
       <template v-if="!isForm && !isExpandedForm" #title>
         {{ tooltipMsg }}
       </template>
-      <span class="name truncate pl-1" :class="{ truncate: !isForm }" :data-test-id="column.title">
+      <span class="name pl-1" :class="{ truncate: !isForm }" :data-test-id="column.title">
         {{ column.title }}
       </span>
     </a-tooltip>
@@ -205,4 +205,4 @@ const openDropDown = (e: Event) => {
   max-width: calc(100% - 40px);
   word-break: break-all;
 }
-</style>
+</style>
\ No newline at end of file

From 5e9a7435ca51cf3f3766ecd57d4517c5728ec5a4 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 09:39:36 +0530
Subject: [PATCH 02/20] fix : fixed truncate for field names and added tooltip
 in details tab

---
 .../components/smartsheet/details/Fields.vue  | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index ac3f2ce25f..b5d73a77fd 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -814,14 +814,16 @@ const onFieldOptionUpdate = () => {
                         'text-brand-500': compareCols(field, activeField),
                       }"
                     />
-                    <span
-                      :class="{
-                        'text-brand-500': compareCols(field, activeField),
-                      }"
-                      class="truncate max-w-64"
-                    >
-                      {{ fieldState(field)?.title || field.title }}
-                    </span>
+                    <a-tooltip :title="fieldState(field)?.title || field.title">
+                      <span
+                        :class="{
+                          'text-brand-500': compareCols(field, activeField),
+                        }"
+                        class="truncate flex-1"
+                      >
+                        {{ fieldState(field)?.title || field.title }}
+                      </span>
+                    </a-tooltip>
                   </div>
                   <div class="flex items-center justify-end gap-1">
                     <div class="flex items-center">
@@ -970,13 +972,16 @@ const onFieldOptionUpdate = () => {
                         'text-brand-500': compareCols(displayColumn, activeField),
                       }"
                     />
-                    <span
-                      :class="{
-                        'text-brand-500': compareCols(displayColumn, activeField),
-                      }"
-                    >
-                      {{ fieldState(displayColumn)?.title || displayColumn.title }}
-                    </span>
+                    <a-tooltip :title="fieldState(displayColumn)?.title || displayColumn.title">
+                      <span
+                        class="truncate flex-1"
+                        :class="{
+                          'text-brand-500': compareCols(displayColumn, activeField),
+                        }"
+                      >
+                        {{ fieldState(displayColumn)?.title || displayColumn.title }}
+                      </span>
+                    </a-tooltip>
                   </div>
                   <div class="flex items-center justify-end gap-1">
                     <div class="flex items-center">

From cdfdf82c7494f3bab5f29c4b1eb83ece2800fad8 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 10:11:10 +0530
Subject: [PATCH 03/20] fix : fixed height of fields container in display
 section

---
 packages/nc-gui/components/smartsheet/details/Fields.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index b5d73a77fd..2888bde0b6 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -770,7 +770,7 @@ const onFieldOptionUpdate = () => {
           </div>
         </div>
         <div class="flex flex-row rounded-lg border-1 border-gray-200">
-          <div ref="fieldsListWrapperDomRef" class="nc-scrollbar-md !overflow-auto w-full flex-grow-1 nc-fields-height">
+          <div ref="fieldsListWrapperDomRef" class="nc-scrollbar-md !overflow-auto flex-1 flex-grow-1 nc-fields-height">
             <Draggable v-model="fields" :disabled="isLocked" item-key="id" @change="onMove($event)">
               <template #item="{ element: field }">
                 <div
@@ -1077,7 +1077,7 @@ const onFieldOptionUpdate = () => {
             </Draggable>
           </div>
           <Transition v-if="!changingField" name="slide-fade">
-            <div class="border-gray-200 border-l-1 rounded-r-xl h-[calc(100vh-(var(--topbar-height)*3.85))]">
+            <div class="border-gray-200 border-l-1 rounded-r-xl nc-scrollbar-md nc-fields-height !overflow-y-auto">
               <SmartsheetColumnEditOrAddProvider
                 v-if="activeField"
                 class="p-4 w-[25rem]"

From 295352f1b8d1df33f627f642debb7b89ab387fd7 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 10:24:47 +0530
Subject: [PATCH 04/20] fix : fixed max-width for table node

---
 packages/nc-gui/components/erd/TableNode.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 22a36200da..1ba0729751 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -54,7 +54,7 @@ watch(
     </template>
 
     <div
-      class="relative h-full flex flex-col justify-center bg-white min-w-16 min-h-8 rounded-lg nc-erd-table-node"
+      class="relative h-full max-w-[20rem] flex flex-col justify-center bg-white min-w-16 min-h-8 rounded-lg nc-erd-table-node"
       :class="[
         `nc-erd-table-node-${table.table_name}`,
         showSkeleton ? 'cursor-pointer items-center min-h-200px min-w-300px' : '',

From 9207eda4c98368d9b747fb3ccff4a37b70b60fc7 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 11:59:51 +0530
Subject: [PATCH 05/20] fix : Used NcTooltip

---
 .../components/smartsheet/details/Fields.vue  | 34 ++++++++++---------
 .../components/smartsheet/header/Cell.vue     | 28 ++++++++-------
 .../smartsheet/header/VirtualCell.vue         | 11 +++---
 3 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 2888bde0b6..97e399ed76 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -814,16 +814,17 @@ const onFieldOptionUpdate = () => {
                         'text-brand-500': compareCols(field, activeField),
                       }"
                     />
-                    <a-tooltip :title="fieldState(field)?.title || field.title">
-                      <span
-                        :class="{
-                          'text-brand-500': compareCols(field, activeField),
-                        }"
-                        class="truncate flex-1"
-                      >
+                    <NcTooltip
+                      :class="{
+                        'text-brand-500': compareCols(field, activeField),
+                      }"
+                      class="truncate flex-1"
+                    >
+                      <template #title> {{ fieldState(field)?.title || field.title }} </template>
+                      <span>
                         {{ fieldState(field)?.title || field.title }}
                       </span>
-                    </a-tooltip>
+                    </NcTooltip>
                   </div>
                   <div class="flex items-center justify-end gap-1">
                     <div class="flex items-center">
@@ -972,16 +973,17 @@ const onFieldOptionUpdate = () => {
                         'text-brand-500': compareCols(displayColumn, activeField),
                       }"
                     />
-                    <a-tooltip :title="fieldState(displayColumn)?.title || displayColumn.title">
-                      <span
-                        class="truncate flex-1"
-                        :class="{
-                          'text-brand-500': compareCols(displayColumn, activeField),
-                        }"
-                      >
+                    <NcTooltip
+                      class="truncate flex-1"
+                      :class="{
+                        'text-brand-500': compareCols(displayColumn, activeField),
+                      }"
+                    >
+                      <template #title> {{ fieldState(displayColumn)?.title || displayColumn.title }} </template>
+                      <span>
                         {{ fieldState(displayColumn)?.title || displayColumn.title }}
                       </span>
-                    </a-tooltip>
+                    </NcTooltip>
                   </div>
                   <div class="flex items-center justify-end gap-1">
                     <div class="flex items-center">
diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index 6dc9a9f6eb..aac782f56c 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -90,20 +90,22 @@ const onClick = (e: Event) => {
         'self-start': isForm || isSurveyForm,
       }"
     />
-    <a-tooltip placement="bottom" :title="column.title">
-      <div
-        v-if="column"
-        class="name pl-1"
-        :class="{
-          'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu && !isExpandedForm,
-          'cursor-default': isForm || !isUIAllowed('fieldEdit') || hideMenu,
-          '!truncate': !isForm,
-        }"
-        :data-test-id="column.title"
-      >
+    <NcTooltip
+      v-if="column"
+      class="name pl-1"
+      :class="{
+        'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu && !isExpandedForm,
+        'cursor-default': isForm || !isUIAllowed('fieldEdit') || hideMenu,
+        '!truncate': !isForm,
+      }"
+      placement="bottom"
+    >
+      <template #title> {{ column.title }} </template>
+
+      <span :data-test-id="column.title">
         {{ column.title }}
-      </div>
-    </a-tooltip>
+      </span>
+    </NcTooltip>
 
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>
 
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
index 3722aac3c5..1dbe0a3752 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
@@ -92,6 +92,7 @@ const tooltipMsg = computed(() => {
   if (!column.value) {
     return ''
   }
+
   if (isHm(column.value)) {
     return `'${tableTile.value}' ${t('labels.hasMany')} '${relatedTableTitle.value}'`
   } else if (isMm(column.value)) {
@@ -110,7 +111,7 @@ const tooltipMsg = computed(() => {
   } else if (isRollup(column.value)) {
     return `'${childColumn.value.title}' of '${relatedTableTitle.value}' (${childColumn.value.uidt})`
   }
-  return ''
+  return column?.value?.title || ''
 })
 
 const columnOrder = ref<Pick<ColumnReqType, 'column_order'> | null>(null)
@@ -153,14 +154,14 @@ const openDropDown = (e: Event) => {
   >
     <LazySmartsheetHeaderVirtualCellIcon v-if="column && !props.hideIcon" />
 
-    <a-tooltip placement="bottom" :title="column.title">
+    <NcTooltip placement="bottom" :class="{ truncate: !isForm }" class="name pl-1">
       <template v-if="!isForm && !isExpandedForm" #title>
         {{ tooltipMsg }}
       </template>
-      <span class="name pl-1" :class="{ truncate: !isForm }" :data-test-id="column.title">
+      <span :data-test-id="column.title">
         {{ column.title }}
       </span>
-    </a-tooltip>
+    </NcTooltip>
 
     <span v-if="isVirtualColRequired(column, meta?.columns || []) || required" class="text-red-500">&nbsp;*</span>
 
@@ -205,4 +206,4 @@ const openDropDown = (e: Event) => {
   max-width: calc(100% - 40px);
   word-break: break-all;
 }
-</style>
\ No newline at end of file
+</style>

From c6eb59df3212a89bd40f6c578b65eb9e74ace1bf Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 13:05:13 +0530
Subject: [PATCH 06/20] fix : changed field span element to div

---
 packages/nc-gui/components/smartsheet/header/Cell.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index aac782f56c..aeb7d9e6bc 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -92,19 +92,24 @@ const onClick = (e: Event) => {
     />
     <NcTooltip
       v-if="column"
-      class="name pl-1"
       :class="{
         'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu && !isExpandedForm,
         'cursor-default': isForm || !isUIAllowed('fieldEdit') || hideMenu,
         '!truncate': !isForm,
       }"
+      class="name pl-1"
       placement="bottom"
     >
       <template #title> {{ column.title }} </template>
 
-      <span :data-test-id="column.title">
+      <div
+        :class="{
+          '!truncate': !isForm,
+        }"
+        :data-test-id="column.title"
+      >
         {{ column.title }}
-      </span>
+      </div>
     </NcTooltip>
 
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>

From 039662720c90def7454de7934aeded1395fe442b Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 14:12:38 +0530
Subject: [PATCH 07/20] fix : added tooltip for sidebar and topbar items

---
 .../dashboard/TreeView/TableNode.vue          |  4 +--
 .../dashboard/TreeView/ViewsNode.vue          | 25 +++++++++----------
 .../smartsheet/toolbar/OpenedViewAction.vue   | 20 ++++++++-------
 3 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index 95c1380988..179da137fe 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -149,7 +149,7 @@ const isTableOpened = computed(() => {
     :class="[`nc-base-tree-tbl nc-base-tree-tbl-${table.title}`]"
     :data-active="openedTableId === table.id"
   >
-    <GeneralTooltip
+    <NcTooltip
       class="nc-tree-item-inner nc-sidebar-node pl-11 pr-0.75 mb-0.25 rounded-md h-7.1 w-full group cursor-pointer hover:bg-gray-200"
       :class="{
         'hover:bg-gray-200': openedTableId !== table.id,
@@ -313,7 +313,7 @@ const isTableOpened = computed(() => {
         :table-id="table.id"
         :base-id="base.id"
       />
-    </GeneralTooltip>
+    </NcTooltip>
     <DashboardTreeViewViewsList v-if="isExpanded" :table-id="table.id" :base-id="base.id" />
   </div>
 </template>
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index 196a296282..72d16a0c0e 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -232,19 +232,18 @@ watch(isDropdownOpen, async () => {
         @blur="onRename"
         @keydown.stop="onKeyDown($event)"
       />
-
-      <div
-        v-else
-        class="nc-sidebar-node-title text-ellipsis overflow-hidden select-none w-full"
-        data-testid="sidebar-view-title"
-        :class="{
-          'font-medium': activeView?.id === vModel.id,
-        }"
-        :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
-      >
-        {{ vModel.alias || vModel.title }}
-      </div>
-
+      <NcTooltip v-else class="nc-sidebar-node-title text-ellipsis overflow-hidden select-none w-full">
+        <template #title> {{ vModel.alias || vModel.title }}</template>
+        <div
+          data-testid="sidebar-view-title"
+          :class="{
+            'font-medium': activeView?.id === vModel.id,
+          }"
+          :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
+        >
+          {{ vModel.alias || vModel.title }}
+        </div>
+      </NcTooltip>
       <div class="flex-1" />
 
       <template v-if="!isEditing && !isLocked && isUIAllowed('viewCreateOrEdit')">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index 87cdf0642d..c4f8b73535 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -173,7 +173,7 @@ function openDeleteDialog() {
   >
     <div
       v-e="['c:breadcrumb:view-actions']"
-      class="truncate nc-active-view-title !hover:(bg-gray-100 text-gray-800) ml-0.25 pl-1 pr-0.25 rounded-md py-1 cursor-pointer"
+      class="truncate nc-active-view-title flex gap-0.5 items-center !hover:(bg-gray-100 text-gray-800) ml-1 pl-1 pr-0.25 rounded-md py-1 cursor-pointer"
       :class="{
         'max-w-2/5': !isSharedBase && !isMobileMode && activeView?.is_default,
         'max-w-3/5': !isSharedBase && !isMobileMode && !activeView?.is_default,
@@ -182,14 +182,16 @@ function openDeleteDialog() {
         'text-gray-800 font-medium': !activeView?.is_default,
       }"
     >
-      <span
-        class="truncate xs:pl-1.25 text-inherit"
-        :class="{
-          'max-w-28/100': !isMobileMode,
-        }"
-      >
-        {{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }}
-      </span>
+      <NcTooltip class="truncate xs:pl-1.25 flex-1 text-inherit">
+        <template #title>{{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }} </template>
+        <span
+          :class="{
+            'max-w-28/100': !isMobileMode,
+          }"
+        >
+          {{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }}
+        </span>
+      </NcTooltip>
       <GeneralIcon icon="arrowDown" class="ml-1" />
     </div>
     <template #overlay>

From 19e6954321b22abe1a2516bfb65011fd7f85998e Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 14:31:58 +0530
Subject: [PATCH 08/20] fix :  added tooltip for linksto options fields

---
 .../smartsheet/column/LinkedToAnotherRecordOptions.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
index 4f9982c320..984ad32ac4 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
@@ -74,16 +74,18 @@ const isLinks = computed(() => vModel.value.uidt === UITypes.Links)
           v-model:value="vModel.childId"
           show-search
           :filter-option="filterOption"
-          dropdown-class-name="nc-dropdown-ltar-child-table"
+          dropdown-class-name="nc-dropdown-ltar-child-table "
           @change="onDataTypeChange"
         >
           <a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
-            <div class="flex items-center gap-2">
+            <div class="flex w-full items-center gap-2">
               <div class="min-w-5 flex items-center justify-center">
                 <GeneralTableIcon :meta="table" class="text-gray-500" />
               </div>
-
-              <span class="overflow-ellipsis min-w-0 shrink-1">{{ table.title }}</span>
+              <NcTooltip class="flex-1 truncate">
+                <template #title>{{ table.title }}</template>
+                <span>{{ table.title }}</span>
+              </NcTooltip>
             </div>
           </a-select-option>
         </a-select>

From e4c6018750e6ac2c660ccead3979a7acc8656f4f Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 15:02:22 +0530
Subject: [PATCH 09/20] fix : added tootip in filters fields option

---
 .../toolbar/FieldListAutoCompleteDropdown.vue        | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
index 27c528948c..b0e50fe97f 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
@@ -82,13 +82,15 @@ if (!localValue.value && allowEmpty !== true) {
     <a-select-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value">
       <div class="flex gap-2 items-center items-center h-full">
         <component :is="option.icon" class="min-w-5 !mx-0" />
-
-        <div
-          class="min-w-0 text-ellipsis overflow-hidden select-none"
+        <NcTooltip
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
+          class="max-w-[15rem] truncate select-none"
         >
-          {{ option.label }}
-        </div>
+          <template #title> {{ option.label }}</template>
+          <span>
+            {{ option.label }}
+          </span>
+        </NcTooltip>
       </div>
     </a-select-option>
   </NcSelect>

From b862466785ff4be99629740e90baa00bb3b14731 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 16:03:18 +0530
Subject: [PATCH 10/20] fix : removed unwanted ! - important

---
 packages/nc-gui/components/erd/TableNode.vue             | 2 +-
 .../smartsheet/column/LinkedToAnotherRecordOptions.vue   | 2 +-
 .../nc-gui/components/smartsheet/expanded-form/index.vue | 4 ++--
 packages/nc-gui/components/smartsheet/header/Cell.vue    | 9 ++-------
 4 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 1ba0729751..63a2d21e05 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -54,7 +54,7 @@ watch(
     </template>
 
     <div
-      class="relative h-full max-w-[20rem] flex flex-col justify-center bg-white min-w-16 min-h-8 rounded-lg nc-erd-table-node"
+      class="relative h-full max-w-76 flex flex-col justify-center bg-white min-w-16 min-h-8 rounded-lg nc-erd-table-node"
       :class="[
         `nc-erd-table-node-${table.table_name}`,
         showSkeleton ? 'cursor-pointer items-center min-h-200px min-w-300px' : '',
diff --git a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
index 984ad32ac4..a538333478 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
@@ -74,7 +74,7 @@ const isLinks = computed(() => vModel.value.uidt === UITypes.Links)
           v-model:value="vModel.childId"
           show-search
           :filter-option="filterOption"
-          dropdown-class-name="nc-dropdown-ltar-child-table "
+          dropdown-class-name="nc-dropdown-ltar-child-table"
           @change="onDataTypeChange"
         >
           <a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index b48e13e25b..b770205130 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -633,11 +633,11 @@ export default {
                 <div class="flex-1 xs:(w-full) mt-0.25 !h-[35px]">
                   <LazySmartsheetHeaderVirtualCell
                     v-if="isVirtualCol(col)"
-                    class="nc-expanded-cell-header h-full !max-w-80"
+                    class="nc-expanded-cell-header h-full max-w-80"
                     :column="col"
                   />
 
-                  <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header !max-w-80" :column="col" />
+                  <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header max-w-80" :column="col" />
                 </div>
 
                 <template v-if="isLoading">
diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index aeb7d9e6bc..f026dff570 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -95,19 +95,14 @@ const onClick = (e: Event) => {
       :class="{
         'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu && !isExpandedForm,
         'cursor-default': isForm || !isUIAllowed('fieldEdit') || hideMenu,
-        '!truncate': !isForm,
+        'truncate': !isForm,
       }"
       class="name pl-1"
       placement="bottom"
     >
       <template #title> {{ column.title }} </template>
 
-      <div
-        :class="{
-          '!truncate': !isForm,
-        }"
-        :data-test-id="column.title"
-      >
+      <div :class="{ truncate: !isForm }" :data-test-id="column.title">
         {{ column.title }}
       </div>
     </NcTooltip>

From a31b544ba56eac7876bf1e428bac3e1e4000a298 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 16:16:27 +0530
Subject: [PATCH 11/20] fix : fixed overflow in fieldContainer

---
 packages/nc-gui/components/smartsheet/details/Fields.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 97e399ed76..1f47d296eb 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -769,7 +769,7 @@ const onFieldOptionUpdate = () => {
             </NcTooltip>
           </div>
         </div>
-        <div class="flex flex-row rounded-lg border-1 border-gray-200">
+        <div class="flex flex-row rounded-lg border-1 overflow-clip border-gray-200">
           <div ref="fieldsListWrapperDomRef" class="nc-scrollbar-md !overflow-auto flex-1 flex-grow-1 nc-fields-height">
             <Draggable v-model="fields" :disabled="isLocked" item-key="id" @change="onMove($event)">
               <template #item="{ element: field }">
@@ -1079,7 +1079,7 @@ const onFieldOptionUpdate = () => {
             </Draggable>
           </div>
           <Transition v-if="!changingField" name="slide-fade">
-            <div class="border-gray-200 border-l-1 rounded-r-xl nc-scrollbar-md nc-fields-height !overflow-y-auto">
+            <div class="border-gray-200 border-l-1 nc-scrollbar-md nc-fields-height !overflow-y-auto">
               <SmartsheetColumnEditOrAddProvider
                 v-if="activeField"
                 class="p-4 w-[25rem]"

From e84c4684d660cf2acfffa9b86e223b4c63480c21 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 16:56:51 +0530
Subject: [PATCH 12/20] fix :  fixed tooltip for virtual cell

---
 .../smartsheet/expanded-form/index.vue        | 37 ++++++++++---------
 .../smartsheet/header/VirtualCell.vue         |  4 +-
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index b770205130..722982786c 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -619,7 +619,9 @@ export default {
             'w-2/3': showRightSections,
           }"
         >
-          <div class="flex flex-col flex-grow mt-2 h-full max-h-full nc-scrollbar-md pb-6 w-full bg-white p-4 xs:p-0">
+          <div
+            class="flex flex-col flex-grow mt-2 h-full max-h-full nc-scrollbar-md pb-6 items-center w-full bg-white p-4 xs:p-0"
+          >
             <div
               v-for="(col, i) of fields"
               v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)"
@@ -630,21 +632,24 @@ export default {
               :data-testid="`nc-expand-col-${col.title}`"
             >
               <div class="flex items-start flex-row sm:(gap-x-6) xs:(flex-col w-full) nc-expanded-cell min-h-10">
-                <div class="flex-1 xs:(w-full) mt-0.25 !h-[35px]">
+                <div class="w-48 xs:(w-full) mt-0.25 !h-[35px]">
                   <LazySmartsheetHeaderVirtualCell
                     v-if="isVirtualCol(col)"
-                    class="nc-expanded-cell-header h-full max-w-80"
+                    class="nc-expanded-cell-header h-full"
                     :column="col"
                   />
 
-                  <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header max-w-80" :column="col" />
+                  <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" />
                 </div>
 
                 <template v-if="isLoading">
-                  <div v-if="isMobileMode" class="!h-8.5 !xs:h-12 !xs:bg-white flex-1 mt-0.75 !rounded-lg !overflow-hidden"></div>
+                  <div
+                    v-if="isMobileMode"
+                    class="!h-8.5 !xs:h-12 !xs:bg-white sm:mr-21 w-60 mt-0.75 !rounded-lg !overflow-hidden"
+                  ></div>
                   <a-skeleton-input
                     v-else
-                    class="!h-8.5 !xs:h-9.5 !xs:bg-white flex-1 mt-0.75 !rounded-lg !overflow-hidden"
+                    class="!h-8.5 !xs:h-9.5 !xs:bg-white sm:mr-21 !w-60 mt-0.75 !rounded-lg !overflow-hidden"
                     active
                     size="small"
                   />
@@ -653,7 +658,7 @@ export default {
                   <SmartsheetDivDataCell
                     v-if="col.title"
                     :ref="i ? null : (el: any) => (cellWrapperEl = el)"
-                    class="bg-white rounded-lg flex-1 !xs:w-full border-1 border-gray-200 overflow-hidden px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
+                    class="bg-white rounded-lg w-80 xs:w-full border-1 border-gray-200 overflow-hidden px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
                     :class="{
                       '!bg-gray-50 !px-0 !select-text': isReadOnlyVirtualCell(col),
                     }"
@@ -696,7 +701,7 @@ export default {
               </NcButton>
               <div class="flex-grow h-px ml-1 bg-gray-100"></div>
             </div>
-            <div v-if="hiddenFields.length > 0 && showHiddenFields" class="flex flex-col w-full mb-3">
+            <div v-if="hiddenFields.length > 0 && showHiddenFields" class="flex flex-col w-full mb-3 items-center">
               <div
                 v-for="(col, i) of hiddenFields"
                 v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)"
@@ -706,24 +711,20 @@ export default {
                 :data-testid="`nc-expand-col-${col.title}`"
               >
                 <div class="sm:gap-x-6 flex sm:flex-row xs:(flex-col) items-start min-h-10">
-                  <div class="flex-1 xs:w-full scale-110 !h-[35px]">
-                    <LazySmartsheetHeaderVirtualCell
-                      v-if="isVirtualCol(col)"
-                      :column="col"
-                      class="nc-expanded-cell-header max-w-80"
-                    />
+                  <div class="sm:w-48 xs:w-full scale-110 !h-[35px]">
+                    <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" class="nc-expanded-cell-header" />
 
-                    <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header max-w-80" :column="col" />
+                    <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" />
                   </div>
 
                   <template v-if="isLoading">
                     <div
                       v-if="isMobileMode"
-                      class="!h-8.5 !xs:h-9.5 !xs:bg-white flex-1 mt-0.75 !rounded-lg !overflow-hidden"
+                      class="!h-8.5 !xs:h-9.5 !xs:bg-white sm:mr-21 w-60 mt-0.75 !rounded-lg !overflow-hidden"
                     ></div>
                     <a-skeleton-input
                       v-else
-                      class="!h-8.5 !xs:h-12 !xs:bg-white flex-1 mt-0.75 !rounded-lg !overflow-hidden"
+                      class="!h-8.5 !xs:h-12 !xs:bg-white sm:mr-21 w-60 mt-0.75 !rounded-lg !overflow-hidden"
                       active
                       size="small"
                     />
@@ -732,7 +733,7 @@ export default {
                     <LazySmartsheetDivDataCell
                       v-if="col.title"
                       :ref="i ? null : (el: any) => (cellWrapperEl = el)"
-                      class="!bg-white rounded-lg flex-1 border-1 overflow-hidden border-gray-200 px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
+                      class="bg-white rounded-lg w-80 border-1 overflow-hidden border-gray-200 px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
                     >
                       <LazySmartsheetVirtualCell
                         v-if="isVirtualCol(col)"
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
index 1dbe0a3752..543c255f5d 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
@@ -154,8 +154,8 @@ const openDropDown = (e: Event) => {
   >
     <LazySmartsheetHeaderVirtualCellIcon v-if="column && !props.hideIcon" />
 
-    <NcTooltip placement="bottom" :class="{ truncate: !isForm }" class="name pl-1">
-      <template v-if="!isForm && !isExpandedForm" #title>
+    <NcTooltip placement="bottom" class="truncate name pl-1">
+      <template #title>
         {{ tooltipMsg }}
       </template>
       <span :data-test-id="column.title">

From 5e2d9aa879aff2bc371ed3f5da96631cc3217bd0 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 18:40:52 +0530
Subject: [PATCH 13/20] fix :  fixed tooltip for table name iin sidebar

---
 .../dashboard/TreeView/TableNode.vue          | 281 +++++++++---------
 1 file changed, 138 insertions(+), 143 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index 179da137fe..922b13b0c1 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -149,96 +149,91 @@ const isTableOpened = computed(() => {
     :class="[`nc-base-tree-tbl nc-base-tree-tbl-${table.title}`]"
     :data-active="openedTableId === table.id"
   >
-    <NcTooltip
-      class="nc-tree-item-inner nc-sidebar-node pl-11 pr-0.75 mb-0.25 rounded-md h-7.1 w-full group cursor-pointer hover:bg-gray-200"
+    <div
+      v-e="['a:table:open']"
+      class="table-context flex items-center gap-1 h-full nc-tree-item-inner nc-sidebar-node pl-11 pr-0.75 mb-0.25 rounded-md h-7.1 w-full group cursor-pointer hover:bg-gray-200"
       :class="{
         'hover:bg-gray-200': openedTableId !== table.id,
         'pl-12 xs:(pl-14)': sourceIndex !== 0,
         'pl-6.5': sourceIndex === 0,
         '!bg-primary-selected': isTableOpened,
       }"
-      modifier-key="Alt"
+      :data-testid="`nc-tbl-side-node-${table.title}`"
+      @contextmenu="setMenuContext('table', table)"
+      @click="onOpenTable"
     >
-      <template #title>{{ table.table_name }}</template>
-      <div
-        v-e="['a:table:open']"
-        class="table-context flex items-center gap-1 h-full"
-        :data-testid="`nc-tbl-side-node-${table.title}`"
-        @contextmenu="setMenuContext('table', table)"
-        @click="onOpenTable"
-      >
-        <div class="flex flex-row h-full items-center">
-          <NcButton
-            v-e="['c:table:toggle-expand']"
-            type="text"
-            size="xxsmall"
-            class="nc-sidebar-node-btn nc-sidebar-expand"
-            @click.stop="onExpand"
+      <div class="flex flex-row h-full items-center">
+        <NcButton
+          v-e="['c:table:toggle-expand']"
+          type="text"
+          size="xxsmall"
+          class="nc-sidebar-node-btn nc-sidebar-expand"
+          @click.stop="onExpand"
+        >
+          <GeneralLoader
+            v-if="table.isViewsLoading"
+            class="flex w-4 h-4 !text-gray-600 !mt-0.75"
+            :class="{
+              '!visible': !isExpanded,
+            }"
+          />
+          <GeneralIcon
+            v-else
+            icon="triangleFill"
+            class="nc-sidebar-source-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90"
+            :class="{ '!rotate-180': isExpanded }"
+          />
+        </NcButton>
+
+        <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
+          <div
+            v-e="['c:table:emoji-picker']"
+            class="flex items-center nc-table-icon"
+            :class="{
+              'pointer-events-none': !canUserEditEmote,
+            }"
+            @click.stop
           >
-            <GeneralLoader
-              v-if="table.isViewsLoading"
-              class="flex w-4 h-4 !text-gray-600 !mt-0.75"
-              :class="{
-                '!visible': !isExpanded,
-              }"
-            />
-            <GeneralIcon
-              v-else
-              icon="triangleFill"
-              class="nc-sidebar-source-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90"
-              :class="{ '!rotate-180': isExpanded }"
-            />
-          </NcButton>
-
-          <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-            <div
-              v-e="['c:table:emoji-picker']"
-              class="flex items-center nc-table-icon"
-              :class="{
-                'pointer-events-none': !canUserEditEmote,
-              }"
-              @click.stop
+            <LazyGeneralEmojiPicker
+              :key="table.meta?.icon"
+              :emoji="table.meta?.icon"
+              size="small"
+              :readonly="!canUserEditEmote || isMobileMode"
+              @emoji-selected="setIcon($event, table)"
             >
-              <LazyGeneralEmojiPicker
-                :key="table.meta?.icon"
-                :emoji="table.meta?.icon"
-                size="small"
-                :readonly="!canUserEditEmote || isMobileMode"
-                @emoji-selected="setIcon($event, table)"
-              >
-                <template #default>
-                  <NcTooltip class="flex" placement="topLeft" hide-on-click :disabled="!canUserEditEmote">
-                    <template #title>
-                      {{ $t('general.changeIcon') }}
-                    </template>
-
-                    <component
-                      :is="iconMap.table"
-                      v-if="table.type === 'table'"
-                      class="flex w-5 !text-gray-500 text-sm"
-                      :class="{
-                        'group-hover:text-gray-500': isUIAllowed('tableSort', { roles: baseRole }),
-                        '!text-black': openedTableId === table.id,
-                      }"
-                    />
-
-                    <MdiEye
-                      v-else
-                      class="flex w-5 !text-gray-500 text-sm"
-                      :class="{
-                        'group-hover:text-gray-500': isUIAllowed('tableSort', { roles: baseRole }),
-                        '!text-black': openedTableId === table.id,
-                      }"
-                    />
-                  </NcTooltip>
-                </template>
-              </LazyGeneralEmojiPicker>
-            </div>
+              <template #default>
+                <NcTooltip class="flex" placement="topLeft" hide-on-click :disabled="!canUserEditEmote">
+                  <template #title>
+                    {{ $t('general.changeIcon') }}
+                  </template>
+
+                  <component
+                    :is="iconMap.table"
+                    v-if="table.type === 'table'"
+                    class="flex w-5 !text-gray-500 text-sm"
+                    :class="{
+                      'group-hover:text-gray-500': isUIAllowed('tableSort', { roles: baseRole }),
+                      '!text-black': openedTableId === table.id,
+                    }"
+                  />
+
+                  <MdiEye
+                    v-else
+                    class="flex w-5 !text-gray-500 text-sm"
+                    :class="{
+                      'group-hover:text-gray-500': isUIAllowed('tableSort', { roles: baseRole }),
+                      '!text-black': openedTableId === table.id,
+                    }"
+                  />
+                </NcTooltip>
+              </template>
+            </LazyGeneralEmojiPicker>
           </div>
         </div>
-
+      </div>
+      <NcTooltip class="nc-tbl-title nc-sidebar-node-title text-ellipsis w-full overflow-hidden select-none">
+        <template #title>{{ table.title }}</template>
         <span
-          class="nc-tbl-title nc-sidebar-node-title text-ellipsis overflow-hidden select-none"
           :class="{
             'text-black !font-medium': isTableOpened,
           }"
@@ -247,73 +242,73 @@ const isTableOpened = computed(() => {
         >
           {{ table.title }}
         </span>
-        <div class="flex flex-grow h-full"></div>
-        <div class="flex flex-row items-center">
-          <div
-            v-if="
-              !isSharedBase &&
-              (isUIAllowed('tableRename', { roles: baseRole }) || isUIAllowed('tableDelete', { roles: baseRole }))
-            "
-            v-e="['c:table:option']"
-          >
-            <NcDropdown :trigger="['click']" class="nc-sidebar-node-btn" @click.stop>
-              <MdiDotsHorizontal
-                data-testid="nc-sidebar-table-context-menu"
-                class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 !text-gray-600 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)"
-              />
-
-              <template #overlay>
-                <NcMenu>
-                  <NcMenuItem
-                    v-if="isUIAllowed('tableRename', { roles: baseRole })"
-                    :data-testid="`sidebar-table-rename-${table.title}`"
-                    @click="openRenameTableDialog(table, base.sources[sourceIndex].id)"
-                  >
-                    <div v-e="['c:table:rename']" class="flex gap-2 items-center">
-                      <GeneralIcon icon="edit" class="text-gray-700" />
-                      {{ $t('general.rename') }}
-                    </div>
-                  </NcMenuItem>
-
-                  <NcMenuItem
-                    v-if="
-                      isUIAllowed('tableDuplicate') &&
-                      base.sources?.[sourceIndex] &&
-                      (base.sources[sourceIndex].is_meta || base.sources[sourceIndex].is_local)
-                    "
-                    :data-testid="`sidebar-table-duplicate-${table.title}`"
-                    @click="duplicateTable(table)"
-                  >
-                    <div v-e="['c:table:duplicate']" class="flex gap-2 items-center">
-                      <GeneralIcon icon="duplicate" class="text-gray-700" />
-                      {{ $t('general.duplicate') }}
-                    </div>
-                  </NcMenuItem>
-
-                  <NcMenuItem
-                    v-if="isUIAllowed('tableDelete', { roles: baseRole })"
-                    :data-testid="`sidebar-table-delete-${table.title}`"
-                    class="!text-red-500 !hover:bg-red-50"
-                    @click="isTableDeleteDialogVisible = true"
-                  >
-                    <div v-e="['c:table:delete']" class="flex gap-2 items-center">
-                      <GeneralIcon icon="delete" />
-                      {{ $t('general.delete') }}
-                    </div>
-                  </NcMenuItem>
-                </NcMenu>
-              </template>
-            </NcDropdown>
-          </div>
+      </NcTooltip>
+      <div class="flex flex-grow h-full"></div>
+      <div class="flex flex-row items-center">
+        <div
+          v-if="
+            !isSharedBase && (isUIAllowed('tableRename', { roles: baseRole }) || isUIAllowed('tableDelete', { roles: baseRole }))
+          "
+          v-e="['c:table:option']"
+        >
+          <NcDropdown :trigger="['click']" class="nc-sidebar-node-btn" @click.stop>
+            <MdiDotsHorizontal
+              data-testid="nc-sidebar-table-context-menu"
+              class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 !text-gray-600 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)"
+            />
+
+            <template #overlay>
+              <NcMenu>
+                <NcMenuItem
+                  v-if="isUIAllowed('tableRename', { roles: baseRole })"
+                  :data-testid="`sidebar-table-rename-${table.title}`"
+                  @click="openRenameTableDialog(table, base.sources[sourceIndex].id)"
+                >
+                  <div v-e="['c:table:rename']" class="flex gap-2 items-center">
+                    <GeneralIcon icon="edit" class="text-gray-700" />
+                    {{ $t('general.rename') }}
+                  </div>
+                </NcMenuItem>
+
+                <NcMenuItem
+                  v-if="
+                    isUIAllowed('tableDuplicate') &&
+                    base.sources?.[sourceIndex] &&
+                    (base.sources[sourceIndex].is_meta || base.sources[sourceIndex].is_local)
+                  "
+                  :data-testid="`sidebar-table-duplicate-${table.title}`"
+                  @click="duplicateTable(table)"
+                >
+                  <div v-e="['c:table:duplicate']" class="flex gap-2 items-center">
+                    <GeneralIcon icon="duplicate" class="text-gray-700" />
+                    {{ $t('general.duplicate') }}
+                  </div>
+                </NcMenuItem>
+
+                <NcMenuItem
+                  v-if="isUIAllowed('tableDelete', { roles: baseRole })"
+                  :data-testid="`sidebar-table-delete-${table.title}`"
+                  class="!text-red-500 !hover:bg-red-50"
+                  @click="isTableDeleteDialogVisible = true"
+                >
+                  <div v-e="['c:table:delete']" class="flex gap-2 items-center">
+                    <GeneralIcon icon="delete" />
+                    {{ $t('general.delete') }}
+                  </div>
+                </NcMenuItem>
+              </NcMenu>
+            </template>
+          </NcDropdown>
         </div>
       </div>
-      <DlgTableDelete
-        v-if="table.id && base?.id"
-        v-model:visible="isTableDeleteDialogVisible"
-        :table-id="table.id"
-        :base-id="base.id"
-      />
-    </NcTooltip>
+    </div>
+    <DlgTableDelete
+      v-if="table.id && base?.id"
+      v-model:visible="isTableDeleteDialogVisible"
+      :table-id="table.id"
+      :base-id="base.id"
+    />
+
     <DashboardTreeViewViewsList v-if="isExpanded" :table-id="table.id" :base-id="base.id" />
   </div>
 </template>

From 81abe97ae7ceef923b739cadfba22741dbcf31b5 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Fri, 1 Dec 2023 11:01:19 +0530
Subject: [PATCH 14/20] fix : added tooltip in sort fields

---
 .../components/smartsheet/toolbar/CreateSort.vue      | 11 +++++++----
 .../components/smartsheet/toolbar/SortListMenu.vue    |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
index e68fbe9b6d..88d4ca73ad 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
@@ -91,7 +91,7 @@ const onArrowUp = () => {
     <div class="flex pb-3 px-4 border-b-1 border-gray-100">
       <input ref="inputRef" v-model="search" class="w-full focus:outline-none" :placeholder="$t('msg.selectFieldToSort')" />
     </div>
-    <div class="flex-col w-full max-h-100 nc-scrollbar-md !overflow-y-auto">
+    <div class="flex-col w-full max-h-100 max-w-76 nc-scrollbar-md !overflow-y-auto">
       <div v-if="!options.length" class="flex text-gray-500 px-4 py-2.25">{{ $t('general.empty') }}</div>
       <div
         v-for="(option, index) in options"
@@ -104,9 +104,12 @@ const onArrowUp = () => {
         @click="onClick(option)"
       >
         <SmartsheetHeaderIcon :column="option" />
-        <div>
-          {{ option.title }}
-        </div>
+        <NcTooltip class="truncate">
+          <template #title> {{ option.title }}</template>
+          <span>
+            {{ option.title }}
+          </span>
+        </NcTooltip>
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index c4660fab9e..a35756630e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -138,7 +138,7 @@ onMounted(() => {
           <template v-for="(sort, i) of sorts" :key="i">
             <SmartsheetToolbarFieldListAutoCompleteDropdown
               v-model="sort.fk_column_id"
-              class="flex caption nc-sort-field-select min-w-40 flex-grow"
+              class="flex caption nc-sort-field-select w-44 flex-grow"
               :columns="columns"
               is-sort
               @click.stop

From 9df46adf174458cd0d57568d79430b2db32b189e Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Fri, 1 Dec 2023 11:38:35 +0530
Subject: [PATCH 15/20] fix : added tooltip for displayValue in fields

---
 .../smartsheet/toolbar/FieldsMenu.vue         | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 6b81cf578e..118a705d74 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -379,13 +379,13 @@ useMenuCloseOnEsc(open)
                       }
                     "
                   >
-                    <div class="flex items-center -ml-0.75">
+                    <div class="flex items-center">
                       <component :is="getIcon(metaColumnById[field.fk_column_id])" />
                       <NcTooltip :disabled="field.title.length < 30">
                         <template #title>
                           {{ field.title }}
                         </template>
-                        <span class="mx-0.65 break-all line-clamp-1">{{ field.title }}</span>
+                        <span class="px-1.5 max-w-60 line-clamp-1">{{ field.title }}</span>
                       </NcTooltip>
                     </div>
 
@@ -408,19 +408,14 @@ useMenuCloseOnEsc(open)
                   @click.stop
                 >
                   <div class="flex flex-row items-center justify-between w-full">
-                    <div class="flex items">
-                      <a-tooltip placement="bottom">
-                        <template #title>
-                          <span class="text-sm">$t('title.displayValue') </span>
-                        </template>
-                      </a-tooltip>
-
-                      <div class="flex items-center">
-                        <component :is="getIcon(metaColumnById[filteredFieldList[0].fk_column_id as string])" />
-
+                    <div class="flex items-center truncate">
+                      <component :is="getIcon(metaColumnById[filteredFieldList[0].fk_column_id as string])" />
+                      <NcTooltip class="px-1.5 truncate">
+                        <template #title>{{ filteredFieldList[0].title }}</template>
                         <span>{{ filteredFieldList[0].title }}</span>
-                      </div>
+                      </NcTooltip>
                     </div>
+
                     <NcSwitch v-e="['a:fields:show-hide']" :checked="true" :disabled="true" />
                   </div>
                 </div>

From 3376efbf533cc152006139d4e4b1a132ebb17a29 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Fri, 1 Dec 2023 11:53:53 +0530
Subject: [PATCH 16/20] fix :  added tooltip to fields in UI-ACL

---
 .../components/dashboard/settings/UIAcl.vue     | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/UIAcl.vue b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
index a48c20372a..d929898a31 100644
--- a/packages/nc-gui/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
@@ -147,7 +147,10 @@ const toggleSelectAll = (role: Role) => {
 <template>
   <div class="flex flex-row w-full items-center justify-center">
     <div class="flex flex-col w-[900px]">
-      <span class="mb-4 first-letter:capital font-bold"> UI ACL : {{ base.title }} </span>
+      <NcTooltip class="mb-4 first-letter:capital font-bold max-w-100 truncate">
+        <template #title>{{ base.title }}</template>
+        <span> UI ACL : {{ base.title }} </span>
+      </NcTooltip>
       <div class="flex flex-row items-center w-full mb-4 gap-2 justify-between">
         <a-input v-model:value="searchInput" :placeholder="$t('placeholder.searchModels')" class="nc-acl-search !w-[400px]">
           <template #prefix>
@@ -208,9 +211,10 @@ const toggleSelectAll = (role: Role) => {
                 <div class="min-w-5 flex items-center justify-center">
                   <GeneralTableIcon :meta="{ meta: record.table_meta, type: record.ptype }" class="text-gray-500" />
                 </div>
-                <GeneralTruncateText>
-                  <span class="overflow-ellipsis min-w-0 shrink-1">{{ record._ptn }}</span>
-                </GeneralTruncateText>
+                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate">
+                  <template #title>{{ record._ptn }}</template>
+                  <span>{{ record._ptn }}</span>
+                </NcTooltip>
               </div>
             </div>
 
@@ -219,7 +223,10 @@ const toggleSelectAll = (role: Role) => {
                 <div class="min-w-5 flex items-center justify-center">
                   <GeneralViewIcon :meta="record" class="text-gray-500"></GeneralViewIcon>
                 </div>
-                <span class="overflow-ellipsis min-w-0 shrink-1">{{ record.title }}</span>
+                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate">
+                  <template #title>{{ record.title }}</template>
+                  <span>{{ record.title }}</span>
+                </NcTooltip>
               </div>
             </div>
 

From 409a49b271c66a153f2197ee5a49e6759d0e299a Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Fri, 1 Dec 2023 12:26:31 +0530
Subject: [PATCH 17/20] fix : added tooltips for base names on toolbar and
 sidebar

---
 .../components/dashboard/TreeView/ProjectNode.vue     | 10 ++++++----
 packages/nc-gui/components/project/View.vue           | 11 +++++++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index d346d3a157..242805c734 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -424,15 +424,17 @@ function projectDelete() {
             @keyup.esc="updateProjectTitle"
             @blur="updateProjectTitle"
           />
-          <span
+          <NcTooltip
             v-else
             class="nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none"
             :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
             :class="{ 'text-black font-semibold': activeProjectId === base.id && baseViewOpen }"
-            @click="onProjectClick(base)"
           >
-            {{ base.title }}
-          </span>
+            <template #title>{{ base.title }}</template>
+            <span @click="onProjectClick(base)">
+              {{ base.title }}
+            </span>
+          </NcTooltip>
           <div :class="{ 'flex flex-grow h-full': !editMode }" @click="onProjectClick(base)"></div>
 
           <NcDropdown v-if="!isSharedBase" v-model:visible="isOptionsOpen" :trigger="['click']">
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index 2f84304a2c..1df117de5b 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -68,16 +68,19 @@ watch(
 <template>
   <div class="h-full nc-base-view">
     <div
-      class="flex flex-row pl-2 pr-2 border-b-1 border-gray-200 justify-between w-full"
+      class="flex flex-row pl-2 pr-2 gap-1 border-b-1 border-gray-200 justify-between w-full"
       :class="{ 'nc-table-toolbar-mobile': isMobileMode, 'h-[var(--topbar-height)]': !isMobileMode }"
     >
       <div class="flex flex-row items-center gap-x-3">
         <GeneralOpenLeftSidebarBtn />
         <div class="flex flex-row items-center h-full gap-x-2.5">
           <GeneralProjectIcon :type="openedProject?.type" />
-          <div class="flex font-medium text-sm capitalize">
-            {{ openedProject?.title }}
-          </div>
+          <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150">
+            <template #title> {{ openedProject?.title }}</template>
+            <span class="truncate">
+              {{ openedProject?.title }}
+            </span>
+          </NcTooltip>
         </div>
       </div>
       <LazyGeneralShareProject />

From 7daf293006e7099c2845bf9028018dba04bbd4f1 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Fri, 1 Dec 2023 15:32:53 +0530
Subject: [PATCH 18/20] fix : fixed width for field items

---
 .../smartsheet/toolbar/FieldsMenu.vue         | 38 ++++++++-----------
 1 file changed, 16 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 118a705d74..18a5c1f610 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -371,7 +371,7 @@ useMenuCloseOnEsc(open)
                   <component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-600 mr-1" />
                   <div
                     v-e="['a:fields:show-hide']"
-                    class="flex flex-row items-center justify-between w-full cursor-pointer ml-1"
+                    class="flex flex-row items-center w-full truncate cursor-pointer ml-1"
                     @click="
                       () => {
                         field.show = !field.show
@@ -379,15 +379,13 @@ useMenuCloseOnEsc(open)
                       }
                     "
                   >
-                    <div class="flex items-center">
-                      <component :is="getIcon(metaColumnById[field.fk_column_id])" />
-                      <NcTooltip :disabled="field.title.length < 30">
-                        <template #title>
-                          {{ field.title }}
-                        </template>
-                        <span class="px-1.5 max-w-60 line-clamp-1">{{ field.title }}</span>
-                      </NcTooltip>
-                    </div>
+                    <component :is="getIcon(metaColumnById[field.fk_column_id])" />
+                    <NcTooltip :disabled="field.title.length < 30" class="flex-1 px-1 truncate">
+                      <template #title>
+                        {{ field.title }}
+                      </template>
+                      <span>{{ field.title }}</span>
+                    </NcTooltip>
 
                     <NcSwitch v-e="['a:fields:show-hide']" :checked="field.show" :disabled="field.isViewEssentialField" />
                   </div>
@@ -399,7 +397,7 @@ useMenuCloseOnEsc(open)
                 <div
                   v-if="gridDisplayValueField && filteredFieldList[0].title.toLowerCase().includes(filterQuery.toLowerCase())"
                   :key="`pv-${gridDisplayValueField.id}`"
-                  class="pl-7.5 pr-2.1 py-2 flex flex-row items-center border-1 border-gray-200"
+                  class="pl-7.4 pr-2 py-2 flex flex-row items-center border-1 border-gray-200"
                   :class="{
                     'rounded-t-lg': filteredFieldList.length > 1,
                     'rounded-lg': filteredFieldList.length === 1,
@@ -407,17 +405,13 @@ useMenuCloseOnEsc(open)
                   :data-testid="`nc-fields-menu-${gridDisplayValueField.title}`"
                   @click.stop
                 >
-                  <div class="flex flex-row items-center justify-between w-full">
-                    <div class="flex items-center truncate">
-                      <component :is="getIcon(metaColumnById[filteredFieldList[0].fk_column_id as string])" />
-                      <NcTooltip class="px-1.5 truncate">
-                        <template #title>{{ filteredFieldList[0].title }}</template>
-                        <span>{{ filteredFieldList[0].title }}</span>
-                      </NcTooltip>
-                    </div>
-
-                    <NcSwitch v-e="['a:fields:show-hide']" :checked="true" :disabled="true" />
-                  </div>
+                  <component :is="getIcon(metaColumnById[filteredFieldList[0].fk_column_id as string])" />
+                  <NcTooltip :disabled="filteredFieldList?.[0]?.title?.length < 30" class="px-1 flex-1 truncate">
+                    <template #title>{{ filteredFieldList[0].title }}</template>
+                    <span>{{ filteredFieldList[0].title }}</span>
+                  </NcTooltip>
+
+                  <NcSwitch v-e="['a:fields:show-hide']" :checked="true" :disabled="true" />
                 </div>
               </template>
             </Draggable>

From 492582c3697a9384d3b4c29d4b36fdc2c1d9f5f6 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Fri, 1 Dec 2023 16:03:30 +0530
Subject: [PATCH 19/20] fix :  added tooltip for search fields

---
 .../nc-gui/components/smartsheet/toolbar/SearchData.vue    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index c14a2b1fc2..4c5e8268c2 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -112,9 +112,12 @@ watch(columns, () => {
         @change="onPressEnter"
       >
         <a-select-option v-for="op of columns" :key="op.value" v-e="['c:search:field:select']" :value="op.value">
-          <div class="text-[0.75rem] flex items-center -ml-1 gap-2">
+          <div class="text-[0.75rem] flex items-center truncate -ml-1 gap-2">
             <SmartsheetHeaderIcon class="text-sm" :column="op.column" />
-            {{ op.label }}
+            <NcTooltip class="truncate" placement="top">
+              <template #title>{{ op.label }}</template>
+              <span>{{ op.label }}</span>
+            </NcTooltip>
           </div>
         </a-select-option>
       </a-select>

From 7f914701c17fc954a293ec25a370ee0499609e0f Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Fri, 1 Dec 2023 16:04:53 +0530
Subject: [PATCH 20/20] fix :  removed unwanted truncate

---
 packages/nc-gui/components/smartsheet/toolbar/SearchData.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 4c5e8268c2..ed181d7d03 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -112,7 +112,7 @@ watch(columns, () => {
         @change="onPressEnter"
       >
         <a-select-option v-for="op of columns" :key="op.value" v-e="['c:search:field:select']" :value="op.value">
-          <div class="text-[0.75rem] flex items-center truncate -ml-1 gap-2">
+          <div class="text-[0.75rem] flex items-center -ml-1 gap-2">
             <SmartsheetHeaderIcon class="text-sm" :column="op.column" />
             <NcTooltip class="truncate" placement="top">
               <template #title>{{ op.label }}</template>