From 24aee43509643ace506b03bf8eda4e3fcc446dba Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 22 Feb 2024 16:18:12 +0000
Subject: [PATCH] fix(nc-gui): show column title on hover field in form view
 right pannel

---
 .../nc-gui/components/smartsheet/Form.vue     | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 932ce2df2f..6ea886ad79 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -719,7 +719,9 @@ useEventListener(
                           <span data-testid="nc-form-input-label">
                             {{ element.label || element.title }}
                           </span>
-                          <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span>
+                          <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
+                            >&nbsp;*</span
+                          >
                         </div>
 
                         <div class="nc-form-help-text text-gray-500 text-sm mt-2" data-testid="nc-form-help-text">
@@ -1038,15 +1040,20 @@ useEventListener(
                       >
                         <component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" />
                         <div
-                          class="flex-1 flex items-center justify-between space-x-2 cursor-pointer max-w-[calc(100%_-_20px)]"
+                          class="flex-1 flex items-center justify-between space-x-6 cursor-pointer max-w-[calc(100%_-_20px)]"
                           @click="showOrHideColumn(field, !field.show, true)"
                         >
-                          <div class="flex-1 flex items-center max-w-[calc(100%_-_40px)]">
-                            <SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
-                            <SmartsheetHeaderCellIcon v-else :column-meta="field" />
-
-                            <NcTooltip class="truncate ml-1" show-on-truncate-only>
-                              <template #title> {{ field.label || field.title }} </template>
+                          <div class="flex-1 flex items-center max-w-[calc(100%_-_56px)]">
+                            <NcTooltip class="truncate ml-1">
+                              <template #title>
+                                <div class="flex items-center space-x-1">
+                                  <SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
+                                  <SmartsheetHeaderCellIcon v-else :column-meta="field" />
+                                  <span class="text-xs font-medium">
+                                    {{ field.title }}
+                                  </span>
+                                </div>
+                              </template>
                               <span data-testid="nc-field-title">
                                 {{ field.label || field.title }}
                               </span>