From 22220fd23855ef0bafa975026acb5d2d44f62a1a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:17 +0000
Subject: [PATCH] fix(nc-gui): link record expanded form fields spacing issue

---
 packages/nc-gui/components/cell/Currency.vue  |  9 +++----
 .../nc-gui/components/cell/DatePicker.vue     |  7 ++----
 .../nc-gui/components/cell/DateTimePicker.vue |  7 ++----
 packages/nc-gui/components/cell/Decimal.vue   |  9 +++----
 packages/nc-gui/components/cell/Duration.vue  | 11 ++++-----
 packages/nc-gui/components/cell/Email.vue     | 11 ++++-----
 packages/nc-gui/components/cell/Float.vue     |  6 ++---
 packages/nc-gui/components/cell/GeoData.vue   |  9 ++-----
 packages/nc-gui/components/cell/Integer.vue   |  9 +++----
 packages/nc-gui/components/cell/Json.vue      | 11 +++------
 .../nc-gui/components/cell/MultiSelect.vue    |  7 ++----
 packages/nc-gui/components/cell/Percent.vue   |  9 +++----
 .../nc-gui/components/cell/PhoneNumber.vue    | 11 ++++-----
 .../nc-gui/components/cell/SingleSelect.vue   |  7 ++----
 packages/nc-gui/components/cell/Text.vue      | 15 +++---------
 .../nc-gui/components/cell/TimePicker.vue     |  7 ++----
 packages/nc-gui/components/cell/Url.vue       | 13 ++++------
 packages/nc-gui/components/cell/User.vue      |  7 ++----
 .../nc-gui/components/cell/YearPicker.vue     |  7 ++----
 .../nc-gui/components/smartsheet/Cell.vue     |  4 ++++
 .../smartsheet/expanded-form/index.vue        |  9 +++++++
 .../components/virtual-cell/BelongsTo.vue     |  5 +---
 .../components/virtual-cell/Formula.vue       | 24 +++----------------
 .../nc-gui/components/virtual-cell/Links.vue  | 20 ++--------------
 .../nc-gui/components/virtual-cell/Lookup.vue |  8 ++-----
 .../nc-gui/components/virtual-cell/Rollup.vue | 17 ++-----------
 .../virtual-cell/barcode/Barcode.vue          | 18 +++-----------
 27 files changed, 80 insertions(+), 197 deletions(-)

diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index d43e5ac26b..8a4fc1080b 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -94,8 +94,7 @@ onMounted(() => {
     :ref="focus"
     v-model="vModel"
     type="number"
-    class="w-full h-full text-sm border-none rounded-md py-1 outline-none focus:outline-none focus:ring-0"
-    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+    class="nc-cell-field w-full h-full text-sm border-none rounded-md py-1 outline-none focus:outline-none focus:ring-0"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
     @blur="submitCurrency"
     @keydown.down.stop
@@ -108,12 +107,10 @@ onMounted(() => {
     @contextmenu.stop
   />
 
-  <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
-    $t('general.null')
-  }}</span>
+  <span v-else-if="vModel === null && showNull" class="nc-cell-field nc-null uppercase">{{ $t('general.null') }}</span>
 
   <!-- only show the numeric value as previously string value was accepted -->
-  <span v-else-if="!isNaN(vModel)" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{ currency }}</span>
+  <span v-else-if="!isNaN(vModel)" class="nc-cell-field">{{ currency }}</span>
 
   <!-- possibly unexpected string / null with showNull == false  -->
   <span v-else />
diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 3bc489a0ed..f801a6722a 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -7,7 +7,6 @@ import {
   ColumnInj,
   EditColumnInj,
   EditModeInj,
-  IsExpandedFormOpenInj,
   ReadonlyInj,
   computed,
   inject,
@@ -42,8 +41,6 @@ const readOnly = inject(ReadonlyInj, ref(false))
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
-
 const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
@@ -244,8 +241,8 @@ const clickHandler = () => {
     :picker="picker"
     :tabindex="0"
     :bordered="false"
-    class="!w-full !py-1 !border-none !text-current"
-    :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
+    class="nc-cell-field !w-full !py-1 !border-none !text-current"
+    :class="{ 'nc-null': modelValue === null && showNull }"
     :format="dateFormat"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 8a350bb0e1..5e320e7f5c 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -6,7 +6,6 @@ import {
   CellClickHookInj,
   ColumnInj,
   EditColumnInj,
-  IsExpandedFormOpenInj,
   ReadonlyInj,
   inject,
   isDrawerOrModalExist,
@@ -40,8 +39,6 @@ const { t } = useI18n()
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
-
 const column = inject(ColumnInj)!
 
 const isDateInvalid = ref(false)
@@ -297,8 +294,8 @@ const isColDisabled = computed(() => {
     :disabled="isColDisabled"
     :show-time="true"
     :bordered="false"
-    class="!w-full !py-1 !border-none !text-current"
-    :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
+    class="nc-cell-field !w-full !py-1 !border-none !text-current"
+    :class="{ 'nc-null': modelValue === null && showNull }"
     :format="dateTimeFormat"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index 79cf2f31e2..1d2b38878c 100644
--- a/packages/nc-gui/components/cell/Decimal.vue
+++ b/packages/nc-gui/components/cell/Decimal.vue
@@ -99,8 +99,7 @@ watch(isExpandedFormOpen, () => {
     v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="outline-none py-1 border-none rounded-md w-full h-full !text-sm"
-    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+    class="nc-cell-field outline-none py-1 border-none rounded-md w-full h-full !text-sm"
     type="number"
     :step="precision"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
@@ -114,10 +113,8 @@ watch(isExpandedFormOpen, () => {
     @selectstart.capture.stop
     @mousedown.stop
   />
-  <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
-    $t('general.null')
-  }}</span>
-  <span v-else class="text-sm" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{ displayValue }}</span>
+  <span v-else-if="vModel === null && showNull" class="nc-cell-field nc-null uppercase">{{ $t('general.null') }}</span>
+  <span v-else class="nc-cell-field text-sm">{{ displayValue }}</span>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index 8805b09031..50f7236f28 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -99,8 +99,7 @@ const focus: VNodeRef = (el) =>
       v-if="!readOnly && editEnabled"
       :ref="focus"
       v-model="localState"
-      class="w-full !border-none !outline-none py-1"
-      :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+      class="nc-cell-field w-full !border-none !outline-none py-1"
       :placeholder="durationPlaceholder"
       @blur="submitDuration"
       @keypress="checkDurationFormat($event)"
@@ -114,13 +113,11 @@ const focus: VNodeRef = (el) =>
       @mousedown.stop
     />
 
-    <span v-else-if="modelValue === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
-      $t('general.null')
-    }}</span>
+    <span v-else-if="modelValue === null && showNull" class="nc-cell-field nc-null uppercase">{{ $t('general.null') }}</span>
 
-    <span v-else :class="isExpandedFormOpen ? 'px-2' : 'px-0'"> {{ localState }}</span>
+    <span v-else class="nc-cell-field"> {{ localState }}</span>
 
-    <div v-if="showWarningMessage && showValidationError" class="duration-warning" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">
+    <div v-if="showWarningMessage && showValidationError" class="nc-cell-field duration-warning">
       {{ $t('msg.plsEnterANumber') }}
     </div>
   </div>
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index 065557e818..2d5dcaf73a 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -77,8 +77,7 @@ watch(
     v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="w-full outline-none text-sm py-1"
-    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+    class="nc-cell-field w-full outline-none text-sm py-1"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
     @blur="editEnabled = false"
     @keydown.down.stop
@@ -90,9 +89,7 @@ watch(
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
-    $t('general.null')
-  }}</span>
+  <span v-else-if="vModel === null && showNull" class="nc-cell-field nc-null uppercase">{{ $t('general.null') }}</span>
 
   <nuxt-link
     v-else-if="validEmail"
@@ -102,8 +99,8 @@ watch(
     target="_blank"
     :tabindex="readOnly ? -1 : 0"
   >
-    <LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
+    <LazyCellClampedText :value="vModel" :lines="rowHeight" class="nc-cell-field" />
   </nuxt-link>
 
-  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
+  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" class="nc-cell-field" />
 </template>
diff --git a/packages/nc-gui/components/cell/Float.vue b/packages/nc-gui/components/cell/Float.vue
index 8460cbcf35..897a79e0de 100644
--- a/packages/nc-gui/components/cell/Float.vue
+++ b/packages/nc-gui/components/cell/Float.vue
@@ -51,7 +51,7 @@ const focus: VNodeRef = (el) =>
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="outline-none px-1 border-none w-full h-full text-sm"
+    class="nc-cell-field outline-none px-1 border-none w-full h-full text-sm"
     type="number"
     step="0.1"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
@@ -64,8 +64,8 @@ const focus: VNodeRef = (el) =>
     @selectstart.capture.stop
     @mousedown.stop
   />
-  <span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
-  <span v-else class="text-sm">{{ vModel }}</span>
+  <span v-else-if="vModel === null && showNull" class="nc-cell-field nc-null uppercase">{{ $t('general.null') }}</span>
+  <span v-else class="nc-cell-field text-sm">{{ vModel }}</span>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/components/cell/GeoData.vue b/packages/nc-gui/components/cell/GeoData.vue
index 17ce48118c..3780fc4f1e 100644
--- a/packages/nc-gui/components/cell/GeoData.vue
+++ b/packages/nc-gui/components/cell/GeoData.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { GeoLocationType } from 'nocodb-sdk'
-import { Modal as AModal, IsExpandedFormOpenInj, iconMap, latLongToJoinedString, useVModel } from '#imports'
+import { Modal as AModal, iconMap, latLongToJoinedString, useVModel } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -16,8 +16,6 @@ const emits = defineEmits<Emits>()
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
-
 const isExpanded = ref(false)
 
 const isLoading = ref(false)
@@ -105,10 +103,7 @@ const openInOSM = () => {
       v-else
       data-testid="nc-geo-data-lat-long-set"
       tabindex="0"
-      class="h-full w-full flex items-center py-1 focus-visible:!outline-none focus:!outline-none"
-      :class="{
-        'px-2': isExpandedFormOpen,
-      }"
+      class="nc-cell-field h-full w-full flex items-center py-1 focus-visible:!outline-none focus:!outline-none"
     >
       {{ latLongStr }}
     </div>
diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue
index c9867a1073..12ed78cf65 100644
--- a/packages/nc-gui/components/cell/Integer.vue
+++ b/packages/nc-gui/components/cell/Integer.vue
@@ -90,8 +90,7 @@ function onKeyDown(e: any) {
     v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="outline-none py-1 border-none w-full h-full text-sm"
-    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+    class="nc-cell-field outline-none py-1 border-none w-full h-full text-sm"
     type="number"
     style="letter-spacing: 0.06rem"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
@@ -105,10 +104,8 @@ function onKeyDown(e: any) {
     @selectstart.capture.stop
     @mousedown.stop
   />
-  <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
-    $t('general.null')
-  }}</span>
-  <span v-else class="text-sm" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{ displayValue }}</span>
+  <span v-else-if="vModel === null && showNull" class="nc-cell-field nc-null uppercase">{{ $t('general.null') }}</span>
+  <span v-else class="nc-cell-field text-sm">{{ displayValue }}</span>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index f9c54bf3c7..027895e949 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -3,7 +3,6 @@ import NcModal from '../nc/Modal.vue'
 import {
   ActiveCellInj,
   EditModeInj,
-  IsExpandedFormOpenInj,
   IsFormInj,
   JsonExpandInj,
   ReadonlyInj,
@@ -38,8 +37,6 @@ const isForm = inject(IsFormInj, ref(false))
 
 const readOnly = inject(ReadonlyInj, ref(false))
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
 const vModel = useVModel(props, 'modelValue', emits)
 
 const localValueState = ref<string | undefined>()
@@ -190,16 +187,14 @@ watch(isExpanded, () => {
         @update:model-value="localValue = $event"
       />
 
-      <span v-if="error" class="text-xs w-full py-1 text-red-500" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">
+      <span v-if="error" class="nc-cell-field text-xs w-full py-1 text-red-500">
         {{ error.toString() }}
       </span>
     </div>
 
-    <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
-      $t('general.null')
-    }}</span>
+    <span v-else-if="vModel === null && showNull" class="nc-cell-field nc-null uppercase">{{ $t('general.null') }}</span>
 
-    <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
+    <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" class="nc-cell-field" />
   </component>
 </template>
 
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 0295a8ef6f..34080cd190 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -8,7 +8,6 @@ import {
   ColumnInj,
   EditColumnInj,
   EditModeInj,
-  IsExpandedFormOpenInj,
   IsKanbanInj,
   ReadonlyInj,
   RowHeightInj,
@@ -64,8 +63,6 @@ const isEditColumn = inject(EditColumnInj, ref(false))
 
 const rowHeight = inject(RowHeightInj, ref(undefined))
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
 const selectedIds = ref<string[]>([])
 
 const aselect = ref<typeof AntSelect>()
@@ -355,8 +352,8 @@ const onFocus = () => {
 
 <template>
   <div
-    class="nc-multi-select h-full w-full flex items-center"
-    :class="{ 'read-only': readOnly, 'px-2': isExpandedFormOpen }"
+    class="nc-cell-field nc-multi-select h-full w-full flex items-center"
+    :class="{ 'read-only': readOnly }"
     @click="toggleMenu"
   >
     <div
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index 7cd706639e..1dcf5fd1da 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -131,8 +131,7 @@ const onTabPress = (e: KeyboardEvent) => {
       v-if="!readOnly && editEnabled && (isExpandedFormOpen ? expandedEditEnabled : true)"
       :ref="focus"
       v-model="vModel"
-      class="w-full !text-sm !border-none !outline-none focus:ring-0 text-base py-1"
-      :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+      class="nc-cell-field w-full !text-sm !border-none !outline-none focus:ring-0 text-base py-1"
       type="number"
       :placeholder="isEditColumn ? $t('labels.optional') : ''"
       @blur="onBlur"
@@ -146,9 +145,7 @@ const onTabPress = (e: KeyboardEvent) => {
       @selectstart.capture.stop
       @mousedown.stop
     />
-    <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
-      $t('general.null')
-    }}</span>
+    <span v-else-if="vModel === null && showNull" class="nc-cell-field nc-null uppercase">{{ $t('general.null') }}</span>
     <div v-else-if="percentMeta.is_progress === true && vModel !== null && vModel !== undefined" class="px-2">
       <a-progress
         :percent="Number(parseFloat(vModel.toString()).toFixed(2))"
@@ -160,7 +157,7 @@ const onTabPress = (e: KeyboardEvent) => {
       />
     </div>
     <!-- nbsp to keep height even if vModel is zero length -->
-    <span v-else :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{ vModel }}&nbsp;</span>
+    <span v-else class="nc-cell-field">{{ vModel }}&nbsp;</span>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/cell/PhoneNumber.vue b/packages/nc-gui/components/cell/PhoneNumber.vue
index 0290cb6068..da7e649fab 100644
--- a/packages/nc-gui/components/cell/PhoneNumber.vue
+++ b/packages/nc-gui/components/cell/PhoneNumber.vue
@@ -67,8 +67,7 @@ watch(
     v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="w-full outline-none text-sm py-1"
-    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+    class="nc-cell-field w-full outline-none text-sm py-1"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
     @blur="editEnabled = false"
     @keydown.down.stop
@@ -80,9 +79,7 @@ watch(
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
-    $t('general.null')
-  }}</span>
+  <span v-else-if="vModel === null && showNull" class="nc-cell-field nc-null uppercase">{{ $t('general.null') }}</span>
 
   <a
     v-else-if="validPhoneNumber"
@@ -92,8 +89,8 @@ watch(
     rel="noopener noreferrer"
     :tabindex="readOnly ? -1 : 0"
   >
-    <LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
+    <LazyCellClampedText :value="vModel" :lines="rowHeight" class="nc-cell-field" />
   </a>
 
-  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
+  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" class="nc-cell-field" />
 </template>
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 2326988f82..1ca601c92f 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -8,7 +8,6 @@ import {
   ColumnInj,
   EditColumnInj,
   EditModeInj,
-  IsExpandedFormOpenInj,
   IsFormInj,
   IsKanbanInj,
   ReadonlyInj,
@@ -48,8 +47,6 @@ const activeCell = inject(ActiveCellInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
 // use both ActiveCellInj or EditModeInj to determine the active state
 // since active will be false in case of form view
 const active = computed(() => activeCell.value || isEditable.value || isForm.value)
@@ -274,8 +271,8 @@ const onFocus = () => {
 
 <template>
   <div
-    class="h-full w-full flex items-center nc-single-select focus:outline-transparent"
-    :class="{ 'read-only': readOnly, 'px-2': isExpandedFormOpen }"
+    class="nc-cell-field h-full w-full flex items-center nc-single-select focus:outline-transparent"
+    :class="{ 'read-only': readOnly }"
     @click="toggleMenu"
     @keydown.enter.stop.prevent="toggleMenu"
   >
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index a56ae41753..32fd5ce1cf 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -45,8 +45,7 @@ const focus: VNodeRef = (el) =>
     v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="h-full w-full outline-none py-1 bg-transparent"
-    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+    class="nc-cell-field h-full w-full outline-none py-1 bg-transparent"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
     @blur="editEnabled = false"
     @keydown.down.stop
@@ -58,15 +57,7 @@ const focus: VNodeRef = (el) =>
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
-    $t('general.null')
-  }}</span>
+  <span v-else-if="vModel === null && showNull" class="nc-cell-field nc-null uppercase">{{ $t('general.null') }}</span>
 
-  <LazyCellClampedText
-    v-else
-    :value="vModel"
-    :lines="rowHeight"
-    :style="{ 'word-break': 'break-word' }"
-    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
-  />
+  <LazyCellClampedText v-else class="nc-cell-field" :value="vModel" :lines="rowHeight" :style="{ 'word-break': 'break-word' }" />
 </template>
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 626cb9bc97..f650091b92 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -3,7 +3,6 @@ import dayjs from 'dayjs'
 import {
   ActiveCellInj,
   EditColumnInj,
-  IsExpandedFormOpenInj,
   ReadonlyInj,
   inject,
   onClickOutside,
@@ -35,8 +34,6 @@ const isEditColumn = inject(EditColumnInj, ref(false))
 
 const column = inject(ColumnInj)!
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
 const isTimeInvalid = ref(false)
 
 const dateFormat = isMysql(column.value.source_id) ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
@@ -134,8 +131,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :bordered="false"
     use12-hours
     format="HH:mm"
-    class="!w-full !py-1 !border-none !text-current"
-    :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
+    class="nc-cell-field !w-full !py-1 !border-none !text-current"
+    :class="{ 'nc-null': modelValue === null && showNull }"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 3ec7125fdf..02c687a298 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -99,8 +99,7 @@ watch(
       :ref="focus"
       v-model="vModel"
       :placeholder="isEditColumn ? $t('labels.enterDefaultUrlOptional') : ''"
-      class="outline-none text-sm w-full py-1 bg-transparent h-full"
-      :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+      class="nc-cell-field outline-none text-sm w-full py-1 bg-transparent h-full"
       @blur="editEnabled = false"
       @keydown.down.stop
       @keydown.left.stop
@@ -111,9 +110,7 @@ watch(
       @mousedown.stop
     />
 
-    <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">
-      {{ $t('general.null') }}</span
-    >
+    <span v-else-if="vModel === null && showNull" class="nc-cell-field nc-null uppercase"> {{ $t('general.null') }}</span>
 
     <nuxt-link
       v-else-if="isValid && !cellUrlOptions?.overlay"
@@ -124,7 +121,7 @@ watch(
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
       :tabindex="readOnly ? -1 : 0"
     >
-      <LazyCellClampedText :value="value" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
+      <LazyCellClampedText :value="value" :lines="rowHeight" class="nc-cell-field" />
     </nuxt-link>
 
     <nuxt-link
@@ -136,11 +133,11 @@ watch(
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
       :tabindex="readOnly ? -1 : 0"
     >
-      <LazyCellClampedText :value="cellUrlOptions.overlay" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
+      <LazyCellClampedText :value="cellUrlOptions.overlay" :lines="rowHeight" class="nc-cell-field" />
     </nuxt-link>
 
     <span v-else class="w-9/10 overflow-ellipsis overflow-hidden"
-      ><LazyCellClampedText :value="value" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+      ><LazyCellClampedText :value="value" :lines="rowHeight" class="nc-cell-field"
     /></span>
 
     <div v-if="column.meta?.validate && !isValid && value?.length && !editEnabled" class="mr-1 w-1/10">
diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index e8da349b51..2b89d774b5 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -9,7 +9,6 @@ import {
   ColumnInj,
   EditColumnInj,
   EditModeInj,
-  IsExpandedFormOpenInj,
   IsKanbanInj,
   ReadonlyInj,
   RowHeightInj,
@@ -49,8 +48,6 @@ const isEditable = inject(EditModeInj, ref(false))
 
 const activeCell = inject(ActiveCellInj, ref(false))
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
 const basesStore = useBases()
 
 const { basesUser } = storeToRefs(basesStore)
@@ -265,8 +262,8 @@ const filterOption = (input: string, option: any) => {
 
 <template>
   <div
-    class="nc-user-select h-full w-full flex items-center"
-    :class="{ 'read-only': readOnly, 'px-2': isExpandedFormOpen }"
+    class="nc-cell-field nc-user-select h-full w-full flex items-center"
+    :class="{ 'read-only': readOnly }"
     @click="toggleMenu"
   >
     <div
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index 090845cb17..d9a21f7e74 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -3,7 +3,6 @@ import dayjs from 'dayjs'
 import {
   ActiveCellInj,
   EditColumnInj,
-  IsExpandedFormOpenInj,
   ReadonlyInj,
   computed,
   inject,
@@ -32,8 +31,6 @@ const editable = inject(EditModeInj, ref(false))
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
 const isYearInvalid = ref(false)
 
 const { t } = useI18n()
@@ -119,8 +116,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :tabindex="0"
     picker="year"
     :bordered="false"
-    class="!w-full !py-1 !border-none !text-current"
-    :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
+    class="nc-cell-field !w-full !py-1 !border-none !text-current"
+    :class="{ 'nc-null': modelValue === null && showNull }"
     :placeholder="placeholder"
     :allow-clear="(!readOnly && !localState && !isPk) || isEditColumn"
     :input-read-only="true"
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 36acdc221e..2b37b61218 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -273,4 +273,8 @@ onUnmounted(() => {
     text-align: right;
   }
 }
+
+.nc-cell .nc-cell-field {
+  @apply px-0;
+}
 </style>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 972680dfd6..9e0b3ff545 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -946,4 +946,13 @@ export default {
 :deep(.nc-system-field input) {
   @apply bg-transparent;
 }
+:deep(.nc-data-cell .nc-cell .nc-cell-field) {
+  @apply px-2;
+}
+:deep(.nc-data-cell .nc-virtual-cell .nc-cell-field) {
+  @apply px-2;
+}
+:deep(.nc-data-cell .nc-cell-field.nc-lookup-cell .nc-cell-field) {
+  @apply px-0;
+}
 </style>
diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index 9e3e45af01..73e3a96b8f 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@@ -5,7 +5,6 @@ import {
   ActiveCellInj,
   CellValueInj,
   ColumnInj,
-  IsExpandedFormOpenInj,
   IsFormInj,
   IsUnderLookupInj,
   ReadonlyInj,
@@ -37,8 +36,6 @@ const isForm = inject(IsFormInj, ref(false))
 
 const isUnderLookup = inject(IsUnderLookupInj, ref(false))
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
 const { isUIAllowed } = useRoles()
 
 const listItemsDlg = ref(false)
@@ -98,7 +95,7 @@ watch([listItemsDlg], () => {
 
 <template>
   <div class="flex w-full chips-wrapper items-center" :class="{ active }">
-    <div class="chips flex items-center flex-1" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">
+    <div class="nc-cell-field chips flex items-center flex-1">
       <template v-if="value && relatedTableDisplayValueProp">
         <VirtualCellComponentsItemChip
           :item="value"
diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index a23da04391..d0b89d2c31 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -2,24 +2,13 @@
 import { handleTZ } from 'nocodb-sdk'
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import {
-  CellValueInj,
-  ColumnInj,
-  IsExpandedFormOpenInj,
-  computed,
-  inject,
-  renderValue,
-  replaceUrlsWithLink,
-  useBase,
-} from '#imports'
+import { CellValueInj, ColumnInj, computed, inject, renderValue, replaceUrlsWithLink, useBase } from '#imports'
 
 // todo: column type doesn't have required property `error` - throws in typecheck
 const column = inject(ColumnInj) as Ref<ColumnType & { colOptions: { error: any } }>
 
 const cellValue = inject(CellValueInj)
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
 const { isPg } = useBase()
 
 const result = computed(() =>
@@ -40,15 +29,8 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
       </template>
       <span>ERR!</span>
     </a-tooltip>
-    <span v-else-if="cellValue === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
-    <div
-      v-else
-      class="py-1"
-      :class="{
-        'px-2': isExpandedFormOpen,
-      }"
-      @dblclick="activateShowEditNonEditableFieldWarning"
-    >
+
+    <div v-else class="nc-cell-field py-1" @dblclick="activateShowEditNonEditableFieldWarning">
       <div v-if="urls" v-html="urls" />
 
       <div v-else>{{ result }}</div>
diff --git a/packages/nc-gui/components/virtual-cell/Links.vue b/packages/nc-gui/components/virtual-cell/Links.vue
index 2a4a2834c0..20c9b9371d 100644
--- a/packages/nc-gui/components/virtual-cell/Links.vue
+++ b/packages/nc-gui/components/virtual-cell/Links.vue
@@ -3,15 +3,7 @@ import { computed } from '@vue/reactivity'
 import type { ColumnType } from 'nocodb-sdk'
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import {
-  ActiveCellInj,
-  CellValueInj,
-  ColumnInj,
-  IsExpandedFormOpenInj,
-  IsUnderLookupInj,
-  inject,
-  useSelectedCellKeyupListener,
-} from '#imports'
+import { ActiveCellInj, CellValueInj, ColumnInj, IsUnderLookupInj, inject, useSelectedCellKeyupListener } from '#imports'
 
 const value = inject(CellValueInj, ref(0))
 
@@ -27,8 +19,6 @@ const readOnly = inject(ReadonlyInj, ref(false))
 
 const isUnderLookup = inject(IsUnderLookupInj, ref(false))
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
 const colTitle = computed(() => column.value?.title || '')
 
 const listItemsDlg = ref(false)
@@ -130,13 +120,7 @@ watch([listItemsDlg], () => {
 </script>
 
 <template>
-  <div
-    class="flex w-full group items-center nc-links-wrapper py-1"
-    :class="{
-      'px-2': isExpandedFormOpen,
-    }"
-    @dblclick.stop="openChildList"
-  >
+  <div class="nc-cell-field flex w-full group items-center nc-links-wrapper py-1" @dblclick.stop="openChildList">
     <div class="block flex-shrink truncate">
       <component
         :is="isUnderLookup ? 'span' : 'a'"
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 451ec25e07..75e4dd0614 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -5,7 +5,6 @@ import {
   CellUrlDisableOverlayInj,
   CellValueInj,
   ColumnInj,
-  IsExpandedFormOpenInj,
   IsUnderLookupInj,
   MetaInj,
   computed,
@@ -28,8 +27,6 @@ const cellValue = inject(CellValueInj, ref())
 
 const isGroupByLabel = inject(IsGroupByLabelInj, ref(false))
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
 // Change the row height of the child cell under lookup
 // Other wise things like text will can take multi line tag
 const providedHeightRef = ref(1) as any
@@ -103,8 +100,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
 
 <template>
   <div
-    class="h-full w-full nc-lookup-cell"
-    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+    class="nc-cell-field h-full w-full nc-lookup-cell"
     tabindex="-1"
     :style="{ height: isGroupByLabel ? undefined : rowHeight && rowHeight !== 1 ? `${rowHeight * 2}rem` : `2.85rem` }"
     @dblclick="activateShowEditNonEditableFieldWarning"
@@ -189,7 +185,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
                     :read-only="true"
                     :class="{
                       'min-h-0 min-w-0': isAttachment(lookupColumn),
-                      '!min-w-20 !w-auto pl-2': !isAttachment(lookupColumn),
+                      '!min-w-20 !w-auto px-2': !isAttachment(lookupColumn),
                     }"
                   />
                 </div>
diff --git a/packages/nc-gui/components/virtual-cell/Rollup.vue b/packages/nc-gui/components/virtual-cell/Rollup.vue
index 40b64eac7f..1a65495344 100644
--- a/packages/nc-gui/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui/components/virtual-cell/Rollup.vue
@@ -1,17 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType, LinkToAnotherRecordType, RollupType } from 'nocodb-sdk'
-import {
-  CellValueInj,
-  ColumnInj,
-  IsExpandedFormOpenInj,
-  MetaInj,
-  computed,
-  inject,
-  isRollup,
-  ref,
-  useMetas,
-  useShowNotEditableWarning,
-} from '#imports'
+import { CellValueInj, ColumnInj, MetaInj, computed, inject, isRollup, ref, useMetas, useShowNotEditableWarning } from '#imports'
 
 const { metas } = useMetas()
 
@@ -21,8 +10,6 @@ const column = inject(ColumnInj)!
 
 const meta = inject(MetaInj, ref())
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
-
 const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activateShowEditNonEditableFieldWarning } =
   useShowNotEditableWarning()
 
@@ -54,7 +41,7 @@ const childColumn = computed(() => {
 </script>
 
 <template>
-  <div :class="isExpandedFormOpen ? 'px-2' : 'px-0'" @dblclick="activateShowEditNonEditableFieldWarning">
+  <div class="nc-cell-field" @dblclick="activateShowEditNonEditableFieldWarning">
     <div v-if="['count', 'avg', 'sum', 'countDistinct', 'sumDistinct', 'avgDistinct'].includes(colOptions.rollup_function)">
       {{ value }}
     </div>
diff --git a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
index b41860e5f7..2de4f366b4 100644
--- a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
+++ b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
@@ -90,25 +90,13 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
     </JsBarcodeWrapper>
   </div>
 
-  <div
-    v-if="tooManyCharsForBarcode"
-    class="text-left text-wrap text-[#e65100] text-xs"
-    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
-  >
+  <div v-if="tooManyCharsForBarcode" class="nc-cell-field text-left text-wrap text-[#e65100] text-xs">
     {{ $t('labels.barcodeValueTooLong') }}
   </div>
-  <div
-    v-if="showEditNonEditableFieldWarning"
-    class="text-left text-wrap mt-2 text-[#e65100] text-xs"
-    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
-  >
+  <div v-if="showEditNonEditableFieldWarning" class="nc-cell-field text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('msg.warning.nonEditableFields.computedFieldUnableToClear') }}
   </div>
-  <div
-    v-if="showClearNonEditableFieldWarning"
-    class="text-left text-wrap mt-2 text-[#e65100] text-xs"
-    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
-  >
+  <div v-if="showClearNonEditableFieldWarning" class="nc-cell-field text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('msg.warning.nonEditableFields.barcodeFieldsCannotBeDirectlyChanged') }}
   </div>
 </template>