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] 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>