From 1cc6c67cd91add0903839124078bd6f586c3056a Mon Sep 17 00:00:00 2001
From: musharaf-nocodb <musharaf@nocodb.com>
Date: Thu, 7 Dec 2023 20:15:18 +0530
Subject: [PATCH] fix : fixed ui in editOrAdd column options

---
 packages/nc-gui/assets/style.scss             |  3 +
 .../settings/data-sources/CreateBase.vue      |  8 +--
 packages/nc-gui/components/nc/Select.vue      |  2 +-
 .../smartsheet/column/CheckboxOptions.vue     | 32 +++++----
 .../smartsheet/column/CurrencyOptions.vue     | 24 ++++++-
 .../smartsheet/column/DateOptions.vue         | 12 ++--
 .../smartsheet/column/DateTimeOptions.vue     | 20 +++++-
 .../smartsheet/column/DecimalOptions.vue      | 12 ++--
 .../smartsheet/column/DurationOptions.vue     | 14 +++-
 .../smartsheet/column/EditOrAdd.vue           | 10 ++-
 .../smartsheet/column/LookupOptions.vue       | 37 +++++++---
 .../smartsheet/column/QrCodeOptions.vue       | 19 ++++-
 .../smartsheet/column/RatingOptions.vue       | 43 +++++++----
 .../smartsheet/column/RollupOptions.vue       | 48 ++++++++++---
 .../smartsheet/expanded-form/index.vue        |  2 +
 .../components/smartsheet/header/Menu.vue     | 72 +++++++++----------
 .../smartsheet/toolbar/SearchData.vue         |  2 +-
 17 files changed, 258 insertions(+), 102 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 21f9cdadc6..f5a0e26d51 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -36,6 +36,9 @@ body {
   overflow-y: visible !important;
 }
 
+.rc-virtual-list-holder-inner{
+  @apply !px-1.5
+}
 .ant-layout-header {
   height: var(--topbar-height) !important;
 }
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
index 1f4a1b9f63..0fcd34ced2 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -451,7 +451,7 @@ const toggleModal = (val: boolean) => {
               <a-select
                 v-model:value="formState.dataSource.client"
                 class="nc-extdb-db-type"
-                dropdown-class-name="nc-dropdown-ext-db-type !px-1.5"
+                dropdown-class-name="nc-dropdown-ext-db-type"
                 @change="onClientChange"
               >
                 <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value">
@@ -540,7 +540,7 @@ const toggleModal = (val: boolean) => {
                   <a-form-item label="SSL mode">
                     <a-select
                       v-model:value="formState.sslUse"
-                      dropdown-class-name="nc-dropdown-ssl-mode !px-1.5"
+                      dropdown-class-name="nc-dropdown-ssl-mode"
                       @select="onSSLModeChange"
                     >
                       <a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">
@@ -635,7 +635,7 @@ const toggleModal = (val: boolean) => {
                   <a-form-item :label="$t('labels.inflection.tableName')">
                     <a-select
                       v-model:value="formState.inflection.inflectionTable"
-                      dropdown-class-name="nc-dropdown-inflection-table-name !px-1.5"
+                      dropdown-class-name="nc-dropdown-inflection-table-name"
                     >
                       <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">
                         <div class="flex items-center gap-2 justify-between">
@@ -654,7 +654,7 @@ const toggleModal = (val: boolean) => {
                   <a-form-item :label="$t('labels.inflection.columnName')">
                     <a-select
                       v-model:value="formState.inflection.inflectionColumn"
-                      dropdown-class-name="nc-dropdown-inflection-column-name !px-1.5"
+                      dropdown-class-name="nc-dropdown-inflection-column-name"
                     >
                       <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp"
                         ><div class="flex items-center gap-2 justify-between">
diff --git a/packages/nc-gui/components/nc/Select.vue b/packages/nc-gui/components/nc/Select.vue
index 2752c776ac..9501721080 100644
--- a/packages/nc-gui/components/nc/Select.vue
+++ b/packages/nc-gui/components/nc/Select.vue
@@ -100,7 +100,7 @@ const onChange = (value: string) => {
 }
 
 .nc-select-dropdown {
-  @apply !rounded-xl p-1.5;
+  @apply !rounded-xl;
 
   .rc-virtual-list-holder {
     overflow-y: scroll;
diff --git a/packages/nc-gui/components/smartsheet/column/CheckboxOptions.vue b/packages/nc-gui/components/smartsheet/column/CheckboxOptions.vue
index 4f57b836e3..30673044a7 100644
--- a/packages/nc-gui/components/smartsheet/column/CheckboxOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/CheckboxOptions.vue
@@ -80,20 +80,28 @@ watch(
       <a-form-item label="Icon">
         <a-select v-model:value="vModel.meta.iconIdx" class="w-52" dropdown-class-name="nc-dropdown-checkbox-icon">
           <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
-            <div class="flex items-center">
-              <component
-                :is="getMdiIcon(icon.checked)"
-                class="mx-1"
-                :style="{
-                  color: vModel.meta.color,
-                }"
-              />
+            <div class="flex gap-2 w-full truncate items-center">
+              <div class="flex-1 truncate">
+                <component
+                  :is="getMdiIcon(icon.checked)"
+                  class="mx-1"
+                  :style="{
+                    color: vModel.meta.color,
+                  }"
+                />
+                <component
+                  :is="getMdiIcon(icon.unchecked)"
+                  :style="{
+                    color: vModel.meta.color,
+                  }"
+                />
+              </div>
 
               <component
-                :is="getMdiIcon(icon.unchecked)"
-                :style="{
-                  color: vModel.meta.color,
-                }"
+                :is="iconMap.check"
+                v-if="vModel.meta.iconIdx === i"
+                id="nc-selected-item-icon"
+                class="text-primary w-4 h-4"
               />
             </div>
           </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
index f19d110c5e..24b72e5924 100644
--- a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
@@ -89,7 +89,19 @@ currencyLocales().then((locales) => {
           dropdown-class-name="nc-dropdown-currency-cell-locale"
         >
           <a-select-option v-for="(currencyLocale, i) of currencyLocaleList" :key="i" :value="currencyLocale.value">
-            {{ currencyLocale.text }}
+            <div class="flex gap-2 w-full truncate items-center">
+              <NcTooltip show-on-truncate-only class="flex-1 truncate">
+                <template #title>{{ currencyLocale.text }}</template>
+                {{ currencyLocale.text }}
+              </NcTooltip>
+
+              <component
+                :is="iconMap.check"
+                v-if="vModel.meta.currency_locale === currencyLocale.value"
+                id="nc-selected-item-icon"
+                class="text-primary w-4 h-4"
+              />
+            </div>
           </a-select-option>
         </a-select>
       </a-form-item>
@@ -106,7 +118,15 @@ currencyLocales().then((locales) => {
           dropdown-class-name="nc-dropdown-currency-cell-code"
         >
           <a-select-option v-for="(currencyCode, i) of currencyList" :key="i" :value="currencyCode">
-            {{ currencyCode }}
+            <div class="flex gap-2 w-full justify-between items-center">
+              {{ currencyCode }}
+              <component
+                :is="iconMap.check"
+                v-if="vModel.meta.currency_code === currencyCode"
+                id="nc-selected-item-icon"
+                class="text-primary w-4 h-4"
+              />
+            </div>
           </a-select-option>
         </a-select>
       </a-form-item>
diff --git a/packages/nc-gui/components/smartsheet/column/DateOptions.vue b/packages/nc-gui/components/smartsheet/column/DateOptions.vue
index 9d620a5a60..ede4fd72bf 100644
--- a/packages/nc-gui/components/smartsheet/column/DateOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/DateOptions.vue
@@ -19,10 +19,14 @@ if (!vModel.value.meta?.date_format) {
   <a-form-item :label="$t('labels.dateFormat')">
     <a-select v-model:value="vModel.meta.date_format" dropdown-class-name="nc-dropdown-date-format">
       <a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format">
-        <div class="flex flex-row items-center">
-          <div class="text-xs">
-            {{ format }}
-          </div>
+        <div class="flex gap-2 w-full justify-between items-center">
+          {{ format }}
+          <component
+            :is="iconMap.check"
+            v-if="vModel.meta.date_format === format"
+            id="nc-selected-item-icon"
+            class="text-primary w-4 h-4"
+          />
         </div>
       </a-select-option>
     </a-select>
diff --git a/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue b/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue
index 90386141d3..93a39deae3 100644
--- a/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue
@@ -24,14 +24,30 @@ if (!vModel.value.meta?.time_format) {
   <a-form-item :label="$t('labels.dateFormat')">
     <a-select v-model:value="vModel.meta.date_format" class="nc-date-select" dropdown-class-name="nc-dropdown-date-format">
       <a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format">
-        {{ format }}
+        <div class="flex gap-2 w-full justify-between items-center">
+          {{ format }}
+          <component
+            :is="iconMap.check"
+            v-if="vModel.meta.date_format === format"
+            id="nc-selected-item-icon"
+            class="text-primary w-4 h-4"
+          />
+        </div>
       </a-select-option>
     </a-select>
   </a-form-item>
   <a-form-item :label="$t('labels.timeFormat')">
     <a-select v-model:value="vModel.meta.time_format" class="nc-time-select" dropdown-class-name="nc-dropdown-time-format">
       <a-select-option v-for="(format, i) of timeFormats" :key="i" :value="format">
-        {{ format }}
+        <div class="flex gap-2 w-full justify-between items-center">
+          {{ format }}
+          <component
+            :is="iconMap.check"
+            v-if="vModel.meta.time_format === format"
+            id="nc-selected-item-icon"
+            class="text-primary w-4 h-4"
+          />
+        </div>
       </a-select-option>
     </a-select>
   </a-form-item>
diff --git a/packages/nc-gui/components/smartsheet/column/DecimalOptions.vue b/packages/nc-gui/components/smartsheet/column/DecimalOptions.vue
index 224c5daacc..65794cbc78 100644
--- a/packages/nc-gui/components/smartsheet/column/DecimalOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/DecimalOptions.vue
@@ -40,10 +40,14 @@ onMounted(() => {
       dropdown-class-name="nc-dropdown-decimal-format"
     >
       <a-select-option v-for="(format, i) of precisionFormats" :key="i" :value="format">
-        <div class="flex flex-row items-center">
-          <div class="text-xs">
-            {{ (precisionFormatsDisplay as any)[format] }}
-          </div>
+        <div class="flex gap-2 w-full justify-between items-center">
+          {{ (precisionFormatsDisplay as any)[format] }}
+          <component
+            :is="iconMap.check"
+            v-if="vModel.meta.precision === format"
+            id="nc-selected-item-icon"
+            class="text-primary w-4 h-4"
+          />
         </div>
       </a-select-option>
     </a-select>
diff --git a/packages/nc-gui/components/smartsheet/column/DurationOptions.vue b/packages/nc-gui/components/smartsheet/column/DurationOptions.vue
index d6d844f0a2..4085dcc3bf 100644
--- a/packages/nc-gui/components/smartsheet/column/DurationOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/DurationOptions.vue
@@ -33,7 +33,19 @@ vModel.value.meta = {
       <a-form-item :label="$t('labels.durationFormat')">
         <a-select v-model:value="vModel.meta.duration" class="w-52" dropdown-class-name="nc-dropdown-duration-option">
           <a-select-option v-for="(duration, i) of durationOptionList" :key="i" :value="duration.id">
-            {{ duration.title }}
+            <div class="flex gap-2 w-full truncate items-center">
+              <NcTooltip show-on-truncate-only class="flex-1 truncate">
+                <template #title> {{ duration.title }}</template>
+                {{ duration.title }}
+              </NcTooltip>
+
+              <component
+                :is="iconMap.check"
+                v-if="vModel.meta.duration === duration.id"
+                id="nc-selected-item-icon"
+                class="text-primary w-4 h-4"
+              />
+            </div>
           </a-select-option>
         </a-select>
       </a-form-item>
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 9d7c909019..e893c37c38 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -279,10 +279,16 @@ if (props.fromTableExplorer) {
                 <GeneralIcon icon="arrowDown" class="text-gray-700" />
               </template>
               <a-select-option v-for="opt of uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt">
-                <div class="flex gap-1 items-center">
+                <div class="flex gap-2 items-center">
                   <component :is="opt.icon" class="text-gray-700 mx-1" />
-                  {{ opt.name }}
+                  <div class="flex-1">{{ opt.name }}</div>
                   <span v-if="opt.deprecated" class="!text-xs !text-gray-300">({{ $t('general.deprecated') }})</span>
+                  <component
+                    :is="iconMap.check"
+                    v-if="formState.uidt === opt.name"
+                    id="nc-selected-item-icon"
+                    class="text-primary w-4 h-4"
+                  />
                 </div>
               </a-select-option>
             </a-select>
diff --git a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
index 7df46de680..c2e41e682a 100644
--- a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
@@ -87,11 +87,23 @@ const cellIcon = (column: ColumnType) =>
           @change="onRelationColChange"
         >
           <a-select-option v-for="(table, i) of refTables" :key="i" :value="table.col.fk_column_id">
-            <div class="flex flex-row h-full pb-0.5 items-center max-w-full">
-              <div class="font-semibold text-xs flex-shrink flex-grow-0 truncate">{{ table.column.title }}</div>
-              <div class="flex-grow"></div>
-              <div class="text-[0.65rem] text-gray-600 nc-relation-details">
-                <span class="uppercase">{{ table.col.type }}</span> {{ table.title || table.table_name }}
+            <div class="flex gap-2 w-full justify-between truncate items-center">
+              <NcTooltip class="font-semibold truncate min-w-1/2" show-on-truncate-only>
+                <template #title>{{ table.column.title }}</template>
+                {{ table.column.title }}</NcTooltip
+              >
+              <div class="inline-flex items-center truncate gap-2">
+                <div class="text-[0.65rem] flex-1 truncate text-gray-600 nc-relation-details">
+                  <span class="uppercase">{{ table.col.type }}</span>
+                  <span class="truncate">{{ table.title || table.table_name }}</span>
+                </div>
+
+                <component
+                  :is="iconMap.check"
+                  v-if="vModel.fk_relation_column_id === table.col.fk_column_id"
+                  id="nc-selected-item-icon"
+                  class="text-primary w-4 h-4"
+                />
               </div>
             </div>
           </a-select-option>
@@ -106,9 +118,18 @@ const cellIcon = (column: ColumnType) =>
           @change="onDataTypeChange"
         >
           <a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
-            <div class="flex items-center -ml-1 font-semibold text-xs">
-              <component :is="cellIcon(column)" :column-meta="column" />
-              {{ column.title }}
+            <div class="flex gap-2 truncate items-center">
+              <div class="flex items-center flex-1 truncate font-semibold">
+                <component :is="cellIcon(column)" :column-meta="column" />
+                <div class="truncate flex-1">{{ column.title }}</div>
+              </div>
+
+              <component
+                :is="iconMap.check"
+                v-if="vModel.fk_lookup_column_id === column.id"
+                id="nc-selected-item-icon"
+                class="text-primary w-4 h-4"
+              />
             </div>
           </a-select-option>
         </a-select>
diff --git a/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue b/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
index 599c09ff62..3b1df1f5ad 100644
--- a/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
@@ -53,10 +53,25 @@ setAdditionalValidations({
       >
         <a-select
           v-model:value="vModel.fk_qr_value_column_id"
-          :options="columnsAllowedAsQrValue"
           :placeholder="$t('placeholder.selectAColumnForTheQRCodeValue')"
           @click.stop
-        />
+        >
+          <a-select-option v-for="opt of columnsAllowedAsQrValue" :key="opt" :value="opt.value">
+            <div class="flex gap-2 w-full truncate items-center">
+              <NcTooltip show-on-truncate-only class="flex-1 truncate">
+                <template #title>{{ opt.label }}</template>
+                {{ opt.label }}
+              </NcTooltip>
+
+              <component
+                :is="iconMap.check"
+                v-if="vModel.fk_qr_value_column_id === opt.value"
+                id="nc-selected-item-icon"
+                class="text-primary w-4 h-4"
+              />
+            </div>
+          </a-select-option>
+        </a-select>
       </a-form-item>
     </a-col>
   </a-row>
diff --git a/packages/nc-gui/components/smartsheet/column/RatingOptions.vue b/packages/nc-gui/components/smartsheet/column/RatingOptions.vue
index 5679369b3f..fefdbe9c41 100644
--- a/packages/nc-gui/components/smartsheet/column/RatingOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/RatingOptions.vue
@@ -74,20 +74,29 @@ watch(
       <a-form-item :label="$t('labels.icon')">
         <a-select v-model:value="vModel.meta.iconIdx" class="w-52" dropdown-class-name="nc-dropdown-rating-icon">
           <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
-            <div class="flex items-center">
-              <component
-                :is="getMdiIcon(icon.full)"
-                class="mx-1"
-                :style="{
-                  color: vModel.meta.color,
-                }"
-              />
+            <div class="flex gap-2 w-full truncate items-center">
+              <div class="flex-1">
+                <component
+                  :is="getMdiIcon(icon.full)"
+                  class="mx-1"
+                  :style="{
+                    color: vModel.meta.color,
+                  }"
+                />
+
+                <component
+                  :is="getMdiIcon(icon.empty)"
+                  :style="{
+                    color: vModel.meta.color,
+                  }"
+                />
+              </div>
 
               <component
-                :is="getMdiIcon(icon.empty)"
-                :style="{
-                  color: vModel.meta.color,
-                }"
+                :is="iconMap.check"
+                v-if="vModel.meta.iconIdx === i"
+                id="nc-selected-item-icon"
+                class="text-primary w-4 h-4"
               />
             </div>
           </a-select-option>
@@ -98,7 +107,15 @@ watch(
       <a-form-item :label="$t('labels.max')">
         <a-select v-model:value="vModel.meta.max" class="w-52" dropdown-class-name="nc-dropdown-rating-color">
           <a-select-option v-for="(v, i) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="i" :value="v">
-            {{ v }}
+            <div class="flex gap-2 w-full justify-between items-center">
+              {{ v }}
+              <component
+                :is="iconMap.check"
+                v-if="vModel.meta.max === v"
+                id="nc-selected-item-icon"
+                class="text-primary w-4 h-4"
+              />
+            </div>
           </a-select-option>
         </a-select>
       </a-form-item>
diff --git a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
index 1ecd358335..3518474a04 100644
--- a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
@@ -106,11 +106,23 @@ const cellIcon = (column: ColumnType) =>
           @change="onRelationColChange"
         >
           <a-select-option v-for="(table, i) of refTables" :key="i" :value="table.col.fk_column_id">
-            <div class="flex flex-row h-full pb-0.5 items-center max-w-full">
-              <div class="font-semibold text-xs flex-shrink flex-grow-0 truncate">{{ table.column.title }}</div>
-              <div class="flex-grow"></div>
-              <div class="text-[0.65rem] text-gray-600 nc-relation-details">
-                <span class="uppercase">{{ table.col.type }}</span> {{ table.title || table.table_name }}
+            <div class="flex gap-2 w-full justify-between truncate items-center">
+              <NcTooltip class="font-semibold truncate min-w-1/2" show-on-truncate-only>
+                <template #title>{{ table.column.title }}</template>
+                {{ table.column.title }}</NcTooltip
+              >
+              <div class="inline-flex items-center truncate gap-2">
+                <div class="text-[0.65rem] flex-1 truncate text-gray-600 nc-relation-details">
+                  <span class="uppercase">{{ table.col.type }}</span>
+                  <span class="truncate">{{ table.title || table.table_name }}</span>
+                </div>
+
+                <component
+                  :is="iconMap.check"
+                  v-if="vModel.fk_relation_column_id === table.col.fk_column_id"
+                  id="nc-selected-item-icon"
+                  class="text-primary w-4 h-4"
+                />
               </div>
             </div>
           </a-select-option>
@@ -125,10 +137,17 @@ const cellIcon = (column: ColumnType) =>
           @change="onDataTypeChange"
         >
           <a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
-            <div class="flex items-center -ml-1 font-semibold text-xs">
-              <component :is="cellIcon(column)" :column-meta="column" />
-
-              {{ column.title }}
+            <div class="flex gap-2 truncate items-center">
+              <div class="flex items-center flex-1 truncate font-semibold">
+                <component :is="cellIcon(column)" :column-meta="column" />
+                <div class="truncate flex-1">{{ column.title }}</div>
+              </div>
+              <component
+                :is="iconMap.check"
+                v-if="vModel.fk_rollup_column_id === column.id"
+                id="nc-selected-item-icon"
+                class="text-primary w-4 h-4"
+              />
             </div>
           </a-select-option>
         </a-select>
@@ -139,10 +158,19 @@ const cellIcon = (column: ColumnType) =>
       <a-select
         v-model:value="vModel.rollup_function"
         dropdown-class-name="nc-dropdown-rollup-function"
+        class="!mt-0.5"
         @change="onDataTypeChange"
       >
         <a-select-option v-for="(func, index) of aggrFunctionsList" :key="index" :value="func.value">
-          {{ func.text }}
+          <div class="flex gap-2 justify-between items-center">
+            {{ func.text }}
+            <component
+              :is="iconMap.check"
+              v-if="vModel.rollup_function === func.value"
+              id="nc-selected-item-icon"
+              class="text-primary w-4 h-4"
+            />
+          </div>
         </a-select-option>
       </a-select>
     </a-form-item>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 722982786c..15ed3091c3 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -585,6 +585,7 @@ export default {
         </template>
         <template v-else>
           <div class="flex flex-row w-full">
+            
             <NcButton
               v-if="props.showNextPrevIcons && !isFirstRow"
               v-e="['c:row-expand:prev']"
@@ -663,6 +664,7 @@ export default {
                       '!bg-gray-50 !px-0 !select-text': isReadOnlyVirtualCell(col),
                     }"
                   >
+                  
                     <LazySmartsheetVirtualCell
                       v-if="isVirtualCol(col)"
                       v-model="_row.row[col.title]"
diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index e5cfd78636..317603597d 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -284,47 +284,47 @@ const onInsertAfter = () => {
     v-model:visible="isOpen"
     :trigger="['click']"
     placement="bottomRight"
-    overlay-class-name="nc-dropdown-column-operations"
+    overlay-class-name="nc-dropdown-column-operations "
     @click.stop="isOpen = !isOpen"
   >
     <div>
       <GeneralIcon icon="arrowDown" class="text-grey h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0 mr-2" />
     </div>
     <template #overlay>
-      <a-menu class="shadow bg-white border-1 border-gray-200 nc-column-options">
-        <a-menu-item @click="onEditPress">
+      <NcMenu class="shadow bg-white border-1 flex flex-col gap-1 border-gray-200 nc-column-options">
+        <NcMenuItem @click="onEditPress">
           <div class="nc-column-edit nc-header-menu-item">
-            <component :is="iconMap.edit" class="text-gray-700 mx-0.65 my-0.75" />
+            <component :is="iconMap.edit" class="text-gray-700" />
             <!-- Edit -->
             {{ $t('general.edit') }}
           </div>
-        </a-menu-item>
+        </NcMenuItem>
         <a-divider v-if="!column?.pv" class="!my-0" />
-        <a-menu-item v-if="!column?.pv" @click="hideField">
-          <div v-e="['a:field:hide']" class="nc-column-insert-before nc-header-menu-item my-0.5">
-            <component :is="iconMap.eye" class="text-gray-700 mx-0.75 !w-3.75 !h-3.75 ml-0.75 mr-0.5" />
+        <NcMenuItem v-if="!column?.pv" @click="hideField">
+          <div v-e="['a:field:hide']" class="nc-column-insert-before nc-header-menu-item">
+            <component :is="iconMap.eye" class="text-gray-700 !w-3.75 !h-3.75" />
             <!-- Hide Field -->
             {{ $t('general.hideField') }}
           </div>
-        </a-menu-item>
-        <a-menu-item v-if="(!virtual || column?.uidt === UITypes.Formula) && !column?.pv" @click="setAsDisplayValue">
-          <div class="nc-column-set-primary nc-header-menu-item item my-0.5">
-            <GeneralIcon icon="star" class="text-gray-700 !w-4.25 !h-4.25 ml-0.5 mr-0.25 -mt-0.5" />
+        </NcMenuItem>
+        <NcMenuItem v-if="(!virtual || column?.uidt === UITypes.Formula) && !column?.pv" @click="setAsDisplayValue">
+          <div class="nc-column-set-primary nc-header-menu-item item">
+            <GeneralIcon icon="star" class="text-gray-700 !w-4.25 !h-4.25" />
 
             <!--       todo : tooltip -->
             <!-- Set as Display value -->
             {{ $t('activity.setDisplay') }}
           </div>
-        </a-menu-item>
+        </NcMenuItem>
 
         <a-divider class="!my-0" />
 
         <template v-if="!isLinksOrLTAR(column) || column.colOptions.type !== RelationTypes.BELONGS_TO">
-          <a-menu-item @click="sortByColumn('asc')">
+          <NcMenuItem @click="sortByColumn('asc')">
             <div v-e="['a:field:sort', { dir: 'asc' }]" class="nc-column-insert-after nc-header-menu-item">
               <component
                 :is="iconMap.sortDesc"
-                class="text-gray-700 !rotate-180 !w-4.25 !h-4.25 ml-0.5 mr-0.25"
+                class="text-gray-700 !rotate-180 !w-4.25 !h-4.25"
                 :style="{
                   transform: 'rotate(180deg)',
                 }"
@@ -333,49 +333,49 @@ const onInsertAfter = () => {
               <!-- Sort Ascending -->
               {{ $t('general.sortAsc') }}
             </div>
-          </a-menu-item>
-          <a-menu-item @click="sortByColumn('desc')">
+          </NcMenuItem>
+          <NcMenuItem @click="sortByColumn('desc')">
             <div v-e="['a:field:sort', { dir: 'desc' }]" class="nc-column-insert-before nc-header-menu-item">
               <component :is="iconMap.sortDesc" class="text-gray-700 !w-4.25 !h-4.25 ml-0.5 mr-0.25" />
               <!-- Sort Descending -->
               {{ $t('general.sortDesc') }}
             </div>
-          </a-menu-item>
+          </NcMenuItem>
         </template>
 
-        <a-divider class="!my-0" />
+        <a-divider v-if="!column?.pk" class="!my-0" />
 
-        <a-menu-item v-if="!column?.pk" @click="openDuplicateDlg">
-          <div v-e="['a:field:duplicate']" class="nc-column-duplicate nc-header-menu-item my-0.5">
-            <component :is="iconMap.duplicate" class="text-gray-700 mx-0.75" />
+        <NcMenuItem v-if="!column?.pk" @click="openDuplicateDlg">
+          <div v-e="['a:field:duplicate']" class="nc-column-duplicate nc-header-menu-item">
+            <component :is="iconMap.duplicate" class="text-gray-700" />
             <!-- Duplicate -->
             {{ t('general.duplicate') }}
           </div>
-        </a-menu-item>
-        <a-menu-item @click="onInsertAfter">
+        </NcMenuItem>
+        <NcMenuItem @click="onInsertAfter">
           <div v-e="['a:field:insert:after']" class="nc-column-insert-after nc-header-menu-item">
-            <component :is="iconMap.colInsertAfter" class="text-gray-700 !w-4.5 !h-4.5 ml-0.75" />
+            <component :is="iconMap.colInsertAfter" class="text-gray-700 !w-4.5 !h-4.5" />
             <!-- Insert After -->
             {{ t('general.insertAfter') }}
           </div>
-        </a-menu-item>
-        <a-menu-item v-if="!column?.pv" @click="onInsertBefore">
+        </NcMenuItem>
+        <NcMenuItem v-if="!column?.pv" @click="onInsertBefore">
           <div v-e="['a:field:insert:before']" class="nc-column-insert-before nc-header-menu-item">
-            <component :is="iconMap.colInsertBefore" class="text-gray-600 !w-4.5 !h-4.5 mr-1.5 -ml-0.75" />
+            <component :is="iconMap.colInsertBefore" class="text-gray-600 !w-4.5 !h-4.5" />
             <!-- Insert Before -->
             {{ t('general.insertBefore') }}
           </div>
-        </a-menu-item>
-        <a-divider class="!my-0" />
+        </NcMenuItem>
+        <a-divider v-if="!column?.pv" class="!my-0" />
 
-        <a-menu-item v-if="!column?.pv" class="!hover:bg-red-50" @click="handleDelete">
-          <div class="nc-column-delete nc-header-menu-item my-0.75 text-red-600">
-            <component :is="iconMap.delete" class="ml-0.75 mr-1" />
+        <NcMenuItem v-if="!column?.pv" class="!hover:bg-red-50" @click="handleDelete">
+          <div class="nc-column-delete nc-header-menu-item text-red-600">
+            <component :is="iconMap.delete" />
             <!-- Delete -->
             {{ $t('general.delete') }}
           </div>
-        </a-menu-item>
-      </a-menu>
+        </NcMenuItem>
+      </NcMenu>
     </template>
   </a-dropdown>
   <SmartsheetHeaderDeleteColumnModal v-model:visible="showDeleteColumnModal" />
@@ -390,7 +390,7 @@ const onInsertAfter = () => {
 
 <style scoped>
 .nc-header-menu-item {
-  @apply text-dropdown flex items-center px-1 py-2 gap-1;
+  @apply text-dropdown flex items-center gap-2;
 }
 
 .nc-column-options {
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 68f2dbe977..8094b719a5 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -111,7 +111,7 @@ watch(columns, () => {
         class="py-1 !absolute top-0 left-0 w-full h-full z-10 text-xs opacity-0"
         @change="onPressEnter"
       >
-        <a-select-option v-for="op of columns" :key="op.value" v-e="['c:search:field:select']" :value="op.value" class="mx-1.5">
+        <a-select-option v-for="op of columns" :key="op.value" v-e="['c:search:field:select']" :value="op.value">
           <div class="text-[0.75rem] flex items-center gap-2">
             <SmartsheetHeaderIcon class="text-sm" :column="op.column" />
             <NcTooltip class="truncate flex-1" placement="top" show-on-truncate-only>