diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index 9e02452f04..9cfba6bb87 100644
--- a/packages/nc-gui/components/cell/Decimal.vue
+++ b/packages/nc-gui/components/cell/Decimal.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel, ReadonlyInj } from '#imports'
 
 interface Props {
   // when we set a number, then it is number type
@@ -25,6 +25,8 @@ const column = inject(ColumnInj, null)!
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const readOnly = inject(ReadonlyInj, ref(false))
+
 const domRef = ref<HTMLElement>()
 
 const meta = computed(() => {
@@ -94,7 +96,7 @@ watch(isExpandedFormOpen, () => {
 
 <template>
   <input
-    v-if="editEnabled"
+    v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
     class="outline-none py-1 border-none rounded-md w-full h-full !text-sm"
@@ -112,8 +114,10 @@ watch(isExpandedFormOpen, () => {
     @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">{{ displayValue }}</span>
+  <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>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue
index c1e27ef338..4e042280dd 100644
--- a/packages/nc-gui/components/cell/Integer.vue
+++ b/packages/nc-gui/components/cell/Integer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel, ReadonlyInj } from '#imports'
 
 interface Props {
   // when we set a number, then it is number type
@@ -23,6 +23,8 @@ const editEnabled = inject(EditModeInj)
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const readOnly = inject(ReadonlyInj, ref(false))
+
 const _vModel = useVModel(props, 'modelValue', emits)
 
 const displayValue = computed(() => {
@@ -85,7 +87,7 @@ function onKeyDown(e: any) {
 
 <template>
   <input
-    v-if="editEnabled"
+    v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
     class="outline-none py-1 border-none w-full h-full text-sm"
@@ -103,8 +105,10 @@ function onKeyDown(e: any) {
     @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">{{ displayValue }}</span>
+  <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>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index ed86f5707c..26038f64d8 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -35,7 +35,7 @@ const active = inject(ActiveCellInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
-const readonly = inject(ReadonlyInj)
+const readOnly = inject(ReadonlyInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
@@ -158,7 +158,7 @@ watch(isExpanded, () => {
     :footer="null"
     :wrap-class-name="isExpanded ? '!z-1051' : null"
   >
-    <div v-if="editEnabled && !readonly" class="flex flex-col w-full" @mousedown.stop @mouseup.stop @click.stop>
+    <div v-if="editEnabled && !readOnly" class="flex flex-col w-full" @mousedown.stop @mouseup.stop @click.stop>
       <div class="flex flex-row justify-between pt-1 pb-2 nc-json-action" @mousedown.stop>
         <a-button type="text" size="small" @click="isExpanded = !isExpanded">
           <CilFullscreenExit v-if="isExpanded" class="h-2.5" />
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index 3ae6d120fd..f0218ed5b5 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel, ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue?: number | string | null
@@ -14,10 +14,12 @@ const { showNull } = useGlobal()
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj, ref(false))
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const readOnly = inject(ReadonlyInj, ref(false))
+
 const _vModel = useVModel(props, 'modelValue', emits)
 
 const wrapperRef = ref<HTMLElement>()
@@ -118,14 +120,15 @@ const onTabPress = (e: KeyboardEvent) => {
 <template>
   <div
     ref="wrapperRef"
-    tabindex="0"
+    :tabindex="readOnly ? -1 : 0"
     class="nc-filter-value-select w-full focus:outline-transparent"
+    :class="readOnly ? 'cursor-not-allowed pointer-events-none' : ''"
     @mouseover="onMouseover"
     @mouseleave="onMouseleave"
     @focus="onWrapperFocus"
   >
     <input
-      v-if="editEnabled"
+      v-if="!readOnly && editEnabled && expandedEditEnabled"
       :ref="focus"
       v-model="vModel"
       class="w-full !text-sm !border-none !outline-none focus:ring-0 text-base py-1"
@@ -143,7 +146,9 @@ const onTabPress = (e: KeyboardEvent) => {
       @selectstart.capture.stop
       @mousedown.stop
     />
-    <span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
+    <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
+      $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))"
@@ -155,7 +160,7 @@ const onTabPress = (e: KeyboardEvent) => {
       />
     </div>
     <!-- nbsp to keep height even if vModel is zero length -->
-    <span v-else>{{ vModel }}&nbsp;</span>
+    <span v-else :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{ vModel }}&nbsp;</span>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index d49022c472..bff031b272 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -7,6 +7,7 @@ import {
   inject,
   parseProp,
   useSelectedCellKeyupListener,
+  ReadonlyInj,
 } from '#imports'
 
 interface Props {
@@ -19,7 +20,7 @@ const emits = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const readonly = inject(ReadonlyInj, ref(false))
+const readOnly = inject(ReadonlyInj, ref(false))
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
@@ -73,7 +74,7 @@ watch(rateDomRef, () => {
   <a-rate
     ref="rateDomRef"
     v-model:value="vModel"
-    :disabled="readonly"
+    :disabled="readOnly"
     :count="ratingMeta.max"
     :style="`color: ${ratingMeta.color}; padding: ${isExpandedFormOpen ? '0px 8px' : '0px 5px'};`"
     @keydown="onKeyPress"
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index 29cb2e17b1..a56ae41753 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -28,7 +28,7 @@ const isEditColumn = inject(EditColumnInj, ref(false))
 
 const rowHeight = inject(RowHeightInj, ref(undefined))
 
-const readonly = inject(ReadonlyInj, ref(false))
+const readOnly = inject(ReadonlyInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
@@ -42,7 +42,7 @@ const focus: VNodeRef = (el) =>
 
 <template>
   <input
-    v-if="!readonly && editEnabled"
+    v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
     class="h-full w-full outline-none py-1 bg-transparent"
@@ -58,7 +58,15 @@ const focus: VNodeRef = (el) =>
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
+  <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
+    $t('general.null')
+  }}</span>
 
-  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :style="{ 'word-break': 'break-word' }" />
+  <LazyCellClampedText
+    v-else
+    :value="vModel"
+    :lines="rowHeight"
+    :style="{ 'word-break': 'break-word' }"
+    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+  />
 </template>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 3599043a64..bc98f18c08 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -39,7 +39,7 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const injectedColumn = inject(ColumnInj, ref())
 
-const readonly = inject(ReadonlyInj, ref(false))
+const readOnly = inject(ReadonlyInj, ref(false))
 
 const { isSharedBase } = storeToRefs(useBase())
 
@@ -107,7 +107,7 @@ const expandedFormRow = ref({})
 const colTitle = computed(() => injectedColumn.value?.title || '')
 
 const onClick = (row: Row) => {
-  if (readonly.value) return
+  if (readOnly.value) return
   expandedFormRow.value = row
   expandedFormDlg.value = true
 }
@@ -166,7 +166,7 @@ const isDataExist = computed<boolean>(() => {
 
 const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
   if (isSharedBase.value) return
-  if (readonly.value) return
+  if (readOnly.value) return
 
   if (isPublic.value && !isForm.value) return
   if (isNew.value || isChildrenListLinked.value[parseInt(id)]) {
@@ -276,7 +276,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
           {{ relatedTableMeta?.title }}
         </p>
         <NcButton
-          v-if="!readonly && childrenListCount < 1"
+          v-if="!readOnly && childrenListCount < 1"
           v-e="['c:links:link']"
           data-testid="nc-child-list-button-link-to"
           @click="emit('attachRecord')"
@@ -322,7 +322,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
       <div class="flex flex-row gap-2">
         <NcButton v-if="!isForm" type="ghost" class="nc-close-btn" @click="vModel = false"> {{ $t('general.finish') }} </NcButton>
         <NcButton
-          v-if="!readonly && childrenListCount > 0"
+          v-if="!readOnly && childrenListCount > 0"
           v-e="['c:links:link']"
           data-testid="nc-child-list-button-link-to"
           @click="emit('attachRecord')"
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
index 7a1caaf075..8bcaac521b 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
@@ -13,6 +13,7 @@ import {
   ref,
   useAttachment,
   useVModel,
+  ReadonlyInj,
 } from '#imports'
 import MaximizeIcon from '~icons/nc-icons/maximize'
 import LinkIcon from '~icons/nc-icons/link'
@@ -39,7 +40,7 @@ const row = useVModel(props, 'row')
 
 const isPublic = inject(IsPublicInj, ref(false))
 
-const readonly = inject(ReadonlyInj, ref(false))
+const readOnly = inject(ReadonlyInj, ref(false))
 
 const { getPossibleAttachmentSrc } = useAttachment()
 
@@ -93,7 +94,7 @@ const displayValue = computed(() => {
       '!bg-white': isLoading,
       '!border-1': isLinked && !isLoading,
       '!hover:border-gray-400': !isLinked,
-      '!cursor-auto !hover:bg-white': readonly,
+      '!cursor-auto !hover:bg-white': readOnly,
     }"
     :body-style="{ padding: 0 }"
     :hoverable="false"
@@ -126,7 +127,7 @@ const displayValue = computed(() => {
             v-if="isLinked && !isLoading"
             class="text-brand-500 text-0.875"
             :class="{
-              '!group-hover:mr-12': fields.length === 0 && !readonly,
+              '!group-hover:mr-12': fields.length === 0 && !readOnly,
             }"
           >
             <LinkIcon class="w-4 h-4" />
@@ -135,7 +136,7 @@ const displayValue = computed(() => {
           <MdiLoading
             v-else-if="isLoading"
             :class="{
-              '!group-hover:mr-8': fields.length === 0 && !readonly,
+              '!group-hover:mr-8': fields.length === 0 && !readOnly,
             }"
             class="w-6 h-6 !text-brand-500 animate-spin"
           />
@@ -174,7 +175,7 @@ const displayValue = computed(() => {
       </div>
     </div>
     <NcButton
-      v-if="!isForm && !isPublic && !readonly"
+      v-if="!isForm && !isPublic && !readOnly"
       v-e="['c:row-expand:open']"
       type="text"
       size="lg"