fix: some ui changes

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

@@ -389,13 +389,15 @@ export default {
                 <MdiChevronDown class="text-md" />
               </NcButton>
             </div>
-            <div v-if="displayValue" class="flex items-center truncate font-bold text-gray-800 text-xl">
+            <div
-              {{ displayValue }}
+              v-if="displayValue && !row.rowMeta?.new"
-            </div>
+              class="flex items-center truncate w-32 hover:w-64 transition-all font-bold text-gray-800 text-xl"
-            <div class="bg-gray-100 px-2 gap-1 flex my-1 items-center rounded-lg text-gray-800 font-medium">
+            >
-              <TableIcon class="w-6 h-6 text-sm" />
+              <span class="truncate">
-              All {{ meta.title }}
+                {{ displayValue }}
+              </span>
             </div>
+            <div v-if="row.rowMeta?.new" class="flex items-center truncate font-bold text-gray-800 text-xl">New Record</div>
           </div>
           <div class="flex gap-2">
             <NcDropdown v-if="!isNew">
@@ -494,16 +496,20 @@ export default {
               :data-testid="`nc-expand-col-${col.title}`"
             >
               <div class="flex items-start flex-row xs:(flex-col w-full) nc-expanded-cell">
-                <div class="w-[12rem] xs:(w-full) mt-1.5">
+                <div class="w-[12rem] xs:(w-full) mt-1.5 !h-[35px]">
-                  <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" class="nc-expanded-cell-header" :column="col" />
+                  <LazySmartsheetHeaderVirtualCell
+                    v-if="isVirtualCol(col)"
+                    class="nc-expanded-cell-header !text-gray-600"
+                    :column="col"
+                  />
 
-                  <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" />
+                  <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header !text-gray-600" :column="col" />
                 </div>
 
                 <LazySmartsheetDivDataCell
                   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 px-1 min-h-[35px] flex items-center relative"
+                  class="!bg-white rounded-lg !w-[20rem] !xs:w-full border-1 overflow-hidden border-gray-200 px-1 min-h-[35px] flex items-center relative"
                 >
                   <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="_row.row[col.title]" :row="_row" :column="col" />
 
@@ -538,16 +544,16 @@ export default {
                 :data-testid="`nc-expand-col-${col.title}`"
               >
                 <div class="flex flex-row items-start">
-                  <div class="w-[12rem] scale-110 mt-2.5">
+                  <div class="w-[12rem] scale-110 !h-[35px] mt-2.5">
-                    <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+                    <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" class="!text-gray-600" :column="col" />
 
-                    <LazySmartsheetHeaderCell v-else :column="col" />
+                    <LazySmartsheetHeaderCell v-else class="!text-gray-600" :column="col" />
                   </div>
 
                   <LazySmartsheetDivDataCell
                     v-if="col.title"
                     :ref="i ? null : (el: any) => (cellWrapperEl = el)"
-                    class="!bg-white rounded-lg !w-[20rem] border-1 border-gray-200 px-1 min-h-[35px] flex items-center relative"
+                    class="!bg-white rounded-lg !w-[20rem] border-1 overflow-hidden border-gray-200 px-1 min-h-[35px] flex items-center relative"
                   >
                     <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="_row.row[col.title]" :row="_row" :column="col" />
 

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

@@ -74,7 +74,11 @@ const openDropDown = () => {
     <div
       v-if="column"
       class="name pl-1"
-      :class="{ 'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu }"
+      :class="{
+        'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu && !isExpandedForm,
+        'cursor-default': isForm || !isUIAllowed('fieldEdit') || hideMenu,
+        '!truncate': !isForm,
+      }"
       :data-test-id="column.title"
     >
       {{ column.title }}

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

@@ -123,22 +123,14 @@ const closeAddColumnDropdown = () => {
 </script>
 
 <template>
-  <div
+  <div class="flex items-center w-full text-xs text-gray-500 font-weight-medium" @click.right="isDropDownOpen = !isDropDownOpen">
-    class="flex items-center w-full text-xs text-gray-500 font-weight-medium"
-    :class="{ 'h-full': column }"
-    @click.right="isDropDownOpen = !isDropDownOpen"
-  >
     <LazySmartsheetHeaderVirtualCellIcon v-if="column && !props.hideIcon" />
 
     <a-tooltip placement="bottom">
-      <template #title>
+      <template v-if="!isForm && !isExpandedForm" #title>
         {{ tooltipMsg }}
       </template>
-      <span
+      <span class="name truncate pl-1" :class="{ truncate: !isForm }" :data-test-id="column.title">
-        class="name pl-1"
-        :class="{ 'truncate': !isForm || !isExpandedForm, 'whitespace-pre-line': isForm || isExpandedForm }"
-        :data-test-id="column.title"
-      >
         {{ column.title }}
       </span>
     </a-tooltip>