From 658da11dc010a3c3955b6dfceaa43ff37e724089 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 22 Feb 2024 16:18:14 +0000
Subject: [PATCH] fic(nc-gui): update form view sidebar field list ui

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

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 09597b0a28..c4cf5935c7 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1052,25 +1052,39 @@ 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-6 cursor-pointer max-w-[calc(100%_-_20px)]"
+                          class="flex-1 flex items-center justify-between cursor-pointer max-w-[calc(100%_-_20px)]"
                           @click="showOrHideColumn(field, !field.show, true)"
                         >
-                          <div class="flex-1 flex items-center max-w-[calc(100%_-_56px)]">
-                            <NcTooltip class="truncate ml-1" :disabled="drag">
-                              <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">
+                          <SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
+                          <SmartsheetHeaderCellIcon v-else :column-meta="field" />
+                          <div class="flex-1 flex items-center justify-start max-w-[calc(100%_-_68px)] mr-4">
+                            <div class="w-full flex items-end">
+                              <div class="ml-1 inline-block max-w-1/2">
+                                <NcTooltip class="truncate" :disabled="drag" show-on-truncate-only>
+                                  <template #title>
+                                    {{ field.title }}
+                                  </template>
+                                  <span data-testid="nc-field-title">
                                     {{ field.title }}
                                   </span>
-                                </div>
-                              </template>
-                              <span data-testid="nc-field-title">
-                                {{ field.label || field.title }}
-                              </span>
-                            </NcTooltip>
-                            <span v-if="isRequired(field, field.required)" class="text-red-500">&nbsp;*</span>
+                                </NcTooltip>
+                              </div>
+                              <div class="ml-1 truncate inline-flex">
+                                <NcTooltip
+                                  class="truncate text-xs font-normal text-gray-700"
+                                  :disabled="drag"
+                                  show-on-truncate-only
+                                >
+                                  <template #title>
+                                    {{ field.label }}
+                                  </template>
+                                  <span data-testid="nc-field-title">
+                                    {{ field.label }}
+                                  </span>
+                                </NcTooltip>
+                              </div>
+                              <span v-if="isRequired(field, field.required)" class="text-red-500">&nbsp;*</span>
+                            </div>
                           </div>
                           <NcSwitch :checked="!!field.show" :disabled="field.required" />
                         </div>