Merge pull request #7114 from nocodb/fix/fields-hover-effects

fix : added tooltip for column fields

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)"
           >
+            <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']">

packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@@ -149,20 +149,15 @@ const isTableOpened = computed(() => {
     :class="[`nc-base-tree-tbl nc-base-tree-tbl-${table.title}`]"
     :data-active="openedTableId === table.id"
   >
-    <GeneralTooltip
-      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"
-    >
-      <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"
@@ -236,9 +231,9 @@ const isTableOpened = computed(() => {
           </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,12 +242,12 @@ const isTableOpened = computed(() => {
         >
           {{ table.title }}
         </span>
+      </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 }))
+            !isSharedBase && (isUIAllowed('tableRename', { roles: baseRole }) || isUIAllowed('tableDelete', { roles: baseRole }))
           "
           v-e="['c:table:option']"
         >
@@ -313,7 +308,7 @@ const isTableOpened = computed(() => {
       :table-id="table.id"
       :base-id="base.id"
     />
-    </GeneralTooltip>
+
     <DashboardTreeViewViewsList v-if="isExpanded" :table-id="table.id" :base-id="base.id" />
   </div>
 </template>

packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue

@@ -232,10 +232,9 @@ watch(isDropdownOpen, async () => {
         @blur="onRename"
         @keydown.stop="onKeyDown($event)"
       />
-
+      <NcTooltip v-else class="nc-sidebar-node-title text-ellipsis overflow-hidden select-none w-full">
+        <template #title> {{ vModel.alias || vModel.title }}</template>
         <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,
@@ -244,7 +243,7 @@ watch(isDropdownOpen, async () => {
         >
           {{ vModel.alias || vModel.title }}
         </div>
-
+      </NcTooltip>
       <div class="flex-1" />
 
       <template v-if="!isEditing && !isLocked && isUIAllowed('viewCreateOrEdit')">

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>
 

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-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' : '',

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">
+          <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150">
+            <template #title> {{ openedProject?.title }}</template>
+            <span class="truncate">
               {{ openedProject?.title }}
-          </div>
+            </span>
+          </NcTooltip>
         </div>
       </div>
       <LazyGeneralShareProject />

packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue

@@ -78,12 +78,14 @@ const isLinks = computed(() => vModel.value.uidt === UITypes.Links)
           @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>

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -769,8 +769,8 @@ const onFieldOptionUpdate = () => {
             </NcTooltip>
           </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 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 }">
                 <div
@@ -814,14 +814,17 @@ const onFieldOptionUpdate = () => {
                         'text-brand-500': compareCols(field, activeField),
                       }"
                     />
-                    <span
+                    <NcTooltip
                       :class="{
                         'text-brand-500': compareCols(field, activeField),
                       }"
-                      class="truncate max-w-64"
+                      class="truncate flex-1"
                     >
+                      <template #title> {{ fieldState(field)?.title || field.title }} </template>
+                      <span>
                         {{ fieldState(field)?.title || field.title }}
                       </span>
+                    </NcTooltip>
                   </div>
                   <div class="flex items-center justify-end gap-1">
                     <div class="flex items-center">
@@ -970,13 +973,17 @@ const onFieldOptionUpdate = () => {
                         'text-brand-500': compareCols(displayColumn, activeField),
                       }"
                     />
-                    <span
+                    <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>
+                    </NcTooltip>
                   </div>
                   <div class="flex items-center justify-end gap-1">
                     <div class="flex items-center">
@@ -1072,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 h-[calc(100vh-(var(--topbar-height)*3.85))]">
+            <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]"

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -645,11 +645,11 @@ export default {
                 <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"
+                    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 !sm:mr-21 !w-60 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"
                   />
@@ -658,7 +658,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 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),
                     }"
@@ -720,11 +720,11 @@ export default {
                   <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 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 !sm:mr-21 !w-60 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"
                     />
@@ -733,7 +733,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 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)"

packages/nc-gui/components/smartsheet/header/Cell.vue

@@ -90,18 +90,22 @@ const onClick = (e: Event) => {
         'self-start': isForm || isSurveyForm,
       }"
     />
-    <div
+    <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,
+        'truncate': !isForm,
       }"
-      :data-test-id="column.title"
+      class="name pl-1"
+      placement="bottom"
     >
+      <template #title> {{ column.title }} </template>
+
+      <div :class="{ truncate: !isForm }" :data-test-id="column.title">
         {{ column.title }}
       </div>
+    </NcTooltip>
 
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>
 

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">
-      <template v-if="!isForm && !isExpandedForm" #title>
+    <NcTooltip placement="bottom" class="truncate name pl-1">
+      <template #title>
         {{ tooltipMsg }}
       </template>
-      <span class="name truncate 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>
 

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>
+        <NcTooltip class="truncate">
+          <template #title> {{ option.title }}</template>
+          <span>
             {{ option.title }}
-        </div>
+          </span>
+        </NcTooltip>
       </div>
     </div>
   </div>

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"
         >
+          <template #title> {{ option.label }}</template>
+          <span>
             {{ option.label }}
-        </div>
+          </span>
+        </NcTooltip>
       </div>
     </a-select-option>
   </NcSelect>

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 -ml-0.75">
                     <component :is="getIcon(metaColumnById[field.fk_column_id])" />
-                      <NcTooltip :disabled="field.title.length < 30">
+                    <NcTooltip :disabled="field.title.length < 30" class="flex-1 px-1 truncate">
                       <template #title>
                         {{ field.title }}
                       </template>
-                        <span class="mx-0.65 break-all line-clamp-1">{{ field.title }}</span>
+                      <span>{{ field.title }}</span>
                     </NcTooltip>
-                    </div>
 
                     <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,23 +405,14 @@ 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">
-                      <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])" />
-
+                  <NcTooltip :disabled="filteredFieldList?.[0]?.title?.length < 30" class="px-1 flex-1 truncate">
+                    <template #title>{{ filteredFieldList[0].title }}</template>
                     <span>{{ filteredFieldList[0].title }}</span>
-                      </div>
-                    </div>
+                  </NcTooltip>
+
                   <NcSwitch v-e="['a:fields:show-hide']" :checked="true" :disabled="true" />
                 </div>
-                </div>
               </template>
             </Draggable>
           </div>

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,
       }"
     >
+      <NcTooltip class="truncate xs:pl-1.25 flex-1 text-inherit">
+        <template #title>{{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }} </template>
         <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>
       <GeneralIcon icon="arrowDown" class="ml-1" />
     </div>
     <template #overlay>

packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@@ -114,7 +114,10 @@ watch(columns, () => {
         <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">
             <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>

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