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