From 8e9b9701d04812b6da631b068180428f58d49ffe Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:15 +0000
Subject: [PATCH 01/17] fix(nc-gui): disable fields edit if its readonly

---
 packages/nc-gui/components/cell/Decimal.vue     | 12 ++++++++----
 packages/nc-gui/components/cell/Integer.vue     | 12 ++++++++----
 packages/nc-gui/components/cell/Json.vue        |  4 ++--
 packages/nc-gui/components/cell/Percent.vue     | 17 +++++++++++------
 packages/nc-gui/components/cell/Rating.vue      |  5 +++--
 packages/nc-gui/components/cell/Text.vue        | 16 ++++++++++++----
 .../virtual-cell/components/ListChildItems.vue  | 10 +++++-----
 .../virtual-cell/components/ListItem.vue        | 11 ++++++-----
 8 files changed, 55 insertions(+), 32 deletions(-)

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"

From 6cdbfdf896b35a7f848072ebcd65ddb898de4764 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:15 +0000
Subject: [PATCH 02/17] fix(nc-gui): added missing readonly property in some of
 the fields

---
 .../nc-gui/components/cell/DatePicker.vue     |  1 +
 packages/nc-gui/components/cell/Duration.vue  | 17 +++++++-----
 packages/nc-gui/components/cell/Email.vue     | 21 +++++++++------
 .../nc-gui/components/cell/PhoneNumber.vue    | 24 ++++++++++-------
 .../nc-gui/components/cell/TimePicker.vue     |  1 +
 packages/nc-gui/components/cell/Url.vue       | 27 ++++++++++++-------
 6 files changed, 57 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index e39344c91e..3bc489a0ed 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -240,6 +240,7 @@ const clickHandler = () => {
 <template>
   <a-date-picker
     v-model:value="localState"
+    :disabled="readOnly"
     :picker="picker"
     :tabindex="0"
     :bordered="false"
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index cde8bdf2ee..f1facc875d 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -13,6 +13,7 @@ import {
   inject,
   parseProp,
   ref,
+  ReadonlyInj,
 } from '#imports'
 
 interface Props {
@@ -32,14 +33,16 @@ const column = inject(ColumnInj)
 
 const editEnabled = inject(EditModeInj)
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
+const readOnly = inject(ReadonlyInj, ref(false))
+
 const showWarningMessage = ref(false)
 
 const durationInMS = ref(0)
 
 const isEdited = ref(false)
 
-const isEditColumn = inject(EditColumnInj, ref(false))
-
 const durationType = computed(() => parseProp(column?.value?.meta)?.duration || 0)
 
 const durationPlaceholder = computed(() =>
@@ -93,7 +96,7 @@ const focus: VNodeRef = (el) =>
 <template>
   <div class="duration-cell-wrapper">
     <input
-      v-if="editEnabled"
+      v-if="!readOnly && editEnabled"
       :ref="focus"
       v-model="localState"
       class="w-full !border-none !outline-none py-1"
@@ -111,11 +114,13 @@ const focus: VNodeRef = (el) =>
       @mousedown.stop
     />
 
-    <span v-else-if="modelValue === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
+    <span v-else-if="modelValue === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
+      $t('general.null')
+    }}</span>
 
-    <span v-else> {{ localState }}</span>
+    <span v-else :class="isExpandedFormOpen ? 'px-2' : 'px-0'"> {{ localState }}</span>
 
-    <div v-if="showWarningMessage && showValidationError" class="duration-warning">
+    <div v-if="showWarningMessage && showValidationError" class="duration-warning" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">
       {{ $t('msg.plsEnterANumber') }}
     </div>
   </div>
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index b68282574c..d4a4976574 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -10,6 +10,7 @@ import {
   inject,
   useI18n,
   validateEmail,
+  ReadonlyInj,
 } from '#imports'
 
 interface Props {
@@ -30,13 +31,15 @@ const editEnabled = inject(EditModeInj)!
 
 const column = inject(ColumnInj)!
 
-// Used in the logic of when to display error since we are not storing the email if it's not valid
-const localState = ref(value)
-
 const isSurveyForm = inject(IsSurveyFormInj, ref(false))
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const readOnly = inject(ReadonlyInj, ref(false))
+
+// Used in the logic of when to display error since we are not storing the email if it's not valid
+const localState = ref(value)
+
 const vModel = computed({
   get: () => value,
   set: (val) => {
@@ -71,7 +74,7 @@ watch(
 
 <template>
   <input
-    v-if="editEnabled"
+    v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
     class="w-full outline-none text-sm py-1"
@@ -87,17 +90,19 @@ watch(
     @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>
 
   <nuxt-link
     v-else-if="validEmail"
     no-ref
-    class="text-sm underline hover:opacity-75 inline-block"
+    class="py-1 text-sm underline hover:opacity-75 inline-block"
     :href="`mailto:${vModel}`"
     target="_blank"
   >
-    <LazyCellClampedText :value="vModel" :lines="rowHeight" />
+    <LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
   </nuxt-link>
 
-  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" />
+  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
 </template>
diff --git a/packages/nc-gui/components/cell/PhoneNumber.vue b/packages/nc-gui/components/cell/PhoneNumber.vue
index 1211a863e6..5778524f82 100644
--- a/packages/nc-gui/components/cell/PhoneNumber.vue
+++ b/packages/nc-gui/components/cell/PhoneNumber.vue
@@ -17,17 +17,19 @@ const { showNull } = useGlobal()
 
 const { t } = useI18n()
 
-const editEnabled = inject(EditModeInj)!
+const editEnabled = inject(EditModeInj, ref(false))
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
 const column = inject(ColumnInj)!
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
+const readOnly = inject(ReadonlyInj, ref(false))
+
 // Used in the logic of when to display error since we are not storing the phone if it's not valid
 const localState = ref(value)
 
-const isSurveyForm = inject(IsSurveyFormInj, ref(false))
-
 const vModel = computed({
   get: () => value,
   set: (val) => {
@@ -38,7 +40,7 @@ const vModel = computed({
   },
 })
 
-const validEmail = computed(() => vModel.value && isMobilePhone(vModel.value))
+const validPhoneNumber = computed(() => vModel.value && isMobilePhone(vModel.value))
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
@@ -62,7 +64,7 @@ watch(
 
 <template>
   <input
-    v-if="editEnabled"
+    v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
     class="w-full outline-none text-sm py-1"
@@ -78,17 +80,19 @@ watch(
     @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>
 
   <a
-    v-else-if="validEmail"
-    class="text-sm underline hover:opacity-75"
+    v-else-if="validPhoneNumber"
+    class="py-1 text-sm underline hover:opacity-75 inline-block"
     :href="`tel:${vModel}`"
     target="_blank"
     rel="noopener noreferrer"
   >
-    <LazyCellClampedText :value="vModel" :lines="rowHeight" />
+    <LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
   </a>
 
-  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" />
+  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
 </template>
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 34081a1e1e..626cb9bc97 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -129,6 +129,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
 <template>
   <a-time-picker
     v-model:value="localState"
+    :disabled="readOnly"
     :show-time="true"
     :bordered="false"
     use12-hours
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 8aa39bac32..5fce0f5f3e 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -17,6 +17,7 @@ import {
   useCellUrlConfig,
   useI18n,
   watch,
+  ReadonlyInj,
 } from '#imports'
 
 interface Props {
@@ -39,13 +40,15 @@ const isEditColumn = inject(EditColumnInj, ref(false))
 
 const disableOverlay = inject(CellUrlDisableOverlayInj, ref(false))
 
-// Used in the logic of when to display error since we are not storing the url if it's not valid
-const localState = ref(value)
-
 const rowHeight = inject(RowHeightInj, ref(undefined))
 
 const isSurveyForm = inject(IsSurveyFormInj, ref(false))
 
+const readOnly = inject(ReadonlyInj, ref(false))
+
+// Used in the logic of when to display error since we are not storing the url if it's not valid
+const localState = ref(value)
+
 const vModel = computed({
   get: () => value,
   set: (val) => {
@@ -92,7 +95,7 @@ watch(
 <template>
   <div class="flex flex-row items-center justify-between w-full h-full">
     <input
-      v-if="editEnabled"
+      v-if="!readOnly && editEnabled"
       :ref="focus"
       v-model="vModel"
       :placeholder="isEditColumn ? $t('labels.enterDefaultUrlOptional') : ''"
@@ -108,31 +111,35 @@ watch(
       @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
+    >
 
     <nuxt-link
       v-else-if="isValid && !cellUrlOptions?.overlay"
       no-prefetch
       no-rel
-      class="z-3 text-sm underline hover:opacity-75"
+      class="py-1 z-3 text-sm underline hover:opacity-75"
       :to="url"
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
     >
-      <LazyCellClampedText :value="value" :lines="rowHeight" />
+      <LazyCellClampedText :value="value" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
     </nuxt-link>
 
     <nuxt-link
       v-else-if="isValid && !disableOverlay && cellUrlOptions?.overlay"
       no-prefetch
       no-rel
-      class="z-3 w-full h-full text-center !no-underline hover:opacity-75"
+      class="py-1 z-3 w-full h-full text-center !no-underline hover:opacity-75"
       :to="url"
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
     >
-      <LazyCellClampedText :value="cellUrlOptions.overlay" :lines="rowHeight" />
+      <LazyCellClampedText :value="cellUrlOptions.overlay" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
     </nuxt-link>
 
-    <span v-else class="w-9/10 overflow-ellipsis overflow-hidden"><LazyCellClampedText :value="value" :lines="rowHeight" /></span>
+    <span v-else class="w-9/10 overflow-ellipsis overflow-hidden"
+      ><LazyCellClampedText :value="value" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+    /></span>
 
     <div v-if="column.meta?.validate && !isValid && value?.length && !editEnabled" class="mr-1 w-1/10">
       <a-tooltip placement="top">

From c2ebcc7d8b0bd67f1ae527857bb3bba92f46f7bc Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:15 +0000
Subject: [PATCH 03/17] fix(nc-gui): readonly tab focus of some fields

---
 packages/nc-gui/components/cell/Email.vue       | 1 +
 packages/nc-gui/components/cell/PhoneNumber.vue | 1 +
 packages/nc-gui/components/cell/Rating.vue      | 1 +
 packages/nc-gui/components/cell/RichText.vue    | 7 +++++--
 packages/nc-gui/components/cell/Url.vue         | 2 ++
 5 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index d4a4976574..b6b4b82bed 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -100,6 +100,7 @@ watch(
     class="py-1 text-sm underline hover:opacity-75 inline-block"
     :href="`mailto:${vModel}`"
     target="_blank"
+    :tabindex="readOnly ? -1 : 0"
   >
     <LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
   </nuxt-link>
diff --git a/packages/nc-gui/components/cell/PhoneNumber.vue b/packages/nc-gui/components/cell/PhoneNumber.vue
index 5778524f82..0290cb6068 100644
--- a/packages/nc-gui/components/cell/PhoneNumber.vue
+++ b/packages/nc-gui/components/cell/PhoneNumber.vue
@@ -90,6 +90,7 @@ watch(
     :href="`tel:${vModel}`"
     target="_blank"
     rel="noopener noreferrer"
+    :tabindex="readOnly ? -1 : 0"
   >
     <LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
   </a>
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index bff031b272..d044d3214f 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -76,6 +76,7 @@ watch(rateDomRef, () => {
     v-model:value="vModel"
     :disabled="readOnly"
     :count="ratingMeta.max"
+    :class="readOnly ? 'pointer-events-none' : ''"
     :style="`color: ${ratingMeta.color}; padding: ${isExpandedFormOpen ? '0px 8px' : '0px 5px'};`"
     @keydown="onKeyPress"
   >
diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index d5680bbf68..fa4be15456 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -8,7 +8,7 @@ import { generateJSON } from '@tiptap/html'
 import Underline from '@tiptap/extension-underline'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
-import { IsExpandedFormOpenInj, RowHeightInj } from '#imports'
+import { IsExpandedFormOpenInj, RowHeightInj, ReadonlyInj } from '#imports'
 
 const props = defineProps<{
   value?: string | null
@@ -24,6 +24,8 @@ const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
 const rowHeight = inject(RowHeightInj, ref(1 as const))
 
+const readOnlyCell = inject(ReadonlyInj, ref(false))
+
 const turndownService = new TurndownService({})
 
 turndownService.addRule('lineBreak', {
@@ -174,7 +176,7 @@ watch(editorDom, () => {
       'nc-rich-text-embed flex flex-col pl-1 w-full': !fullMode,
       'readonly': readOnly,
     }"
-    tabindex="0"
+    :tabindex="readOnlyCell ? -1 : 0"
   >
     <div
       v-if="showMenu && !readOnly"
@@ -191,6 +193,7 @@ watch(editorDom, () => {
     <CellRichTextLinkOptions v-if="editor" :editor="editor" />
     <EditorContent
       ref="editorDom"
+      :disabled="readOnly"
       :editor="editor"
       class="flex flex-col nc-textarea-rich-editor w-full"
       :class="{
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 5fce0f5f3e..a62b4c6eb4 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -122,6 +122,7 @@ watch(
       class="py-1 z-3 text-sm underline hover:opacity-75"
       :to="url"
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
+      :tabindex="readOnly ? -1 : 0"
     >
       <LazyCellClampedText :value="value" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
     </nuxt-link>
@@ -133,6 +134,7 @@ watch(
       class="py-1 z-3 w-full h-full text-center !no-underline hover:opacity-75"
       :to="url"
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
+      :tabindex="readOnly ? -1 : 0"
     >
       <LazyCellClampedText :value="cellUrlOptions.overlay" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
     </nuxt-link>

From 79dee3d785fba90eec5053056be30419a3a47587 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:16 +0000
Subject: [PATCH 04/17] fix(nc-gui): disable currency field if its readonly and
 checkbox field tab focus issue

---
 packages/nc-gui/components/cell/Checkbox.vue |  2 ++
 packages/nc-gui/components/cell/Currency.vue | 11 ++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index 1689d07fcf..c6bfecc871 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -90,6 +90,7 @@ useSelectedCellKeyupListener(active, (e) => {
       'w-full justify-center': !isForm && !isGallery && !isExpandedFormOpen,
       'nc-cell-hover-show': !vModel && !readOnly,
       'opacity-0': readOnly && !vModel,
+      'pointer-events-none': readOnly,
     }"
     :style="{
       height:
@@ -98,6 +99,7 @@ useSelectedCellKeyupListener(active, (e) => {
     tabindex="0"
     @click="onClick(false, $event)"
     @keydown.enter.stop="onClick(true, $event)"
+    :tabindex="readOnly ? -1 : 0"
   >
     <div
       class="flex items-center"
diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index 998830186b..f7ca6e7af9 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -10,6 +10,7 @@ import {
   inject,
   parseProp,
   useVModel,
+  ReadonlyInj,
 } from '#imports'
 
 interface Props {
@@ -28,6 +29,8 @@ const editEnabled = inject(EditModeInj)!
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const readOnly = inject(ReadonlyInj, ref(false))
+
 const _vModel = useVModel(props, 'modelValue', emit)
 
 const vModel = computed({
@@ -87,7 +90,7 @@ onMounted(() => {
 
 <template>
   <input
-    v-if="editEnabled"
+    v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
     type="number"
@@ -105,10 +108,12 @@ onMounted(() => {
     @contextmenu.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>
 
   <!-- only show the numeric value as previously string value was accepted -->
-  <span v-else-if="!isNaN(vModel)">{{ currency }}</span>
+  <span v-else-if="!isNaN(vModel)" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{ currency }}</span>
 
   <!-- possibly unexpected string / null with showNull == false  -->
   <span v-else />

From 9a39e84676155ba95957b568a12663c3e4839912 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:16 +0000
Subject: [PATCH 05/17] fix(nc-gui): json & virtual fields spacing issue

---
 packages/nc-gui/components/cell/Json.vue       | 11 ++++++++---
 .../components/virtual-cell/BelongsTo.vue      |  5 ++++-
 .../nc-gui/components/virtual-cell/Links.vue   |  4 ++--
 .../nc-gui/components/virtual-cell/Lookup.vue  |  4 ++++
 .../nc-gui/components/virtual-cell/Rollup.vue  | 17 +++++++++++++++--
 .../virtual-cell/barcode/Barcode.vue           | 18 +++++++++++++++---
 6 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index 26038f64d8..56c4fa96e3 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -13,6 +13,7 @@ import {
   useSelectedCellKeyupListener,
   useVModel,
   watch,
+  IsExpandedFormOpenInj,
 } from '#imports'
 
 interface Props {
@@ -37,6 +38,8 @@ 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>()
@@ -187,14 +190,16 @@ watch(isExpanded, () => {
         @update:model-value="localValue = $event"
       />
 
-      <span v-if="error" class="text-xs w-full py-1 text-red-500">
+      <span v-if="error" class="text-xs w-full py-1 text-red-500" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">
         {{ error.toString() }}
       </span>
     </div>
 
-    <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" />
+    <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
   </component>
 </template>
 
diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index 67cbaa0d80..779267fcd8 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@@ -18,6 +18,7 @@ import {
   useRoles,
   useSelectedCellKeyupListener,
   useSmartsheetRowStoreOrThrow,
+  IsExpandedFormOpenInj,
 } from '#imports'
 
 const column = inject(ColumnInj)!
@@ -36,6 +37,8 @@ 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)
@@ -95,7 +98,7 @@ watch([listItemsDlg], () => {
 
 <template>
   <div class="flex w-full chips-wrapper items-center" :class="{ active }">
-    <div class="chips flex items-center flex-1">
+    <div class="chips flex items-center flex-1" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">
       <template v-if="value && relatedTableDisplayValueProp">
         <VirtualCellComponentsItemChip
           :item="value"
diff --git a/packages/nc-gui/components/virtual-cell/Links.vue b/packages/nc-gui/components/virtual-cell/Links.vue
index 09c69a5d85..2a4a2834c0 100644
--- a/packages/nc-gui/components/virtual-cell/Links.vue
+++ b/packages/nc-gui/components/virtual-cell/Links.vue
@@ -145,7 +145,7 @@ watch([listItemsDlg], () => {
         :title="textVal"
         class="text-center nc-datatype-link underline-transparent"
         :class="{ '!text-gray-300': !textVal }"
-        tabindex="0"
+        :tabindex="readOnly ? -1 : 0"
         @click.stop.prevent="openChildList"
         @keydown.enter.stop.prevent="openChildList"
       >
@@ -157,7 +157,7 @@ watch([listItemsDlg], () => {
     <div
       v-if="!isUnderLookup"
       ref="plusBtnRef"
-      tabindex="0"
+      :tabindex="readOnly ? -1 : 0"
       class="!xs:hidden flex group justify-end group-hover:flex items-center"
       @keydown.enter.stop="openListDlg"
     >
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 835afc42c3..528901edef 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -15,6 +15,7 @@ import {
   useMetas,
   useShowNotEditableWarning,
   watch,
+  IsExpandedFormOpenInj,
 } from '#imports'
 
 const { metas, getMeta } = useMetas()
@@ -27,6 +28,8 @@ 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
@@ -101,6 +104,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
 <template>
   <div
     class="h-full w-full nc-lookup-cell"
+    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
     tabindex="-1"
     :style="{ height: isGroupByLabel ? undefined : rowHeight && rowHeight !== 1 ? `${rowHeight * 2}rem` : `2.85rem` }"
     @dblclick="activateShowEditNonEditableFieldWarning"
diff --git a/packages/nc-gui/components/virtual-cell/Rollup.vue b/packages/nc-gui/components/virtual-cell/Rollup.vue
index 5b558c79c8..34a3a86faf 100644
--- a/packages/nc-gui/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui/components/virtual-cell/Rollup.vue
@@ -1,6 +1,17 @@
 <script setup lang="ts">
 import type { ColumnType, LinkToAnotherRecordType, RollupType } from 'nocodb-sdk'
-import { CellValueInj, ColumnInj, MetaInj, computed, inject, isRollup, ref, useMetas, useShowNotEditableWarning } from '#imports'
+import {
+  CellValueInj,
+  ColumnInj,
+  MetaInj,
+  computed,
+  inject,
+  isRollup,
+  ref,
+  useMetas,
+  useShowNotEditableWarning,
+  IsExpandedFormOpenInj,
+} from '#imports'
 
 const { metas } = useMetas()
 
@@ -10,6 +21,8 @@ const column = inject(ColumnInj)!
 
 const meta = inject(MetaInj, ref())
 
+const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
+
 const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activateShowEditNonEditableFieldWarning } =
   useShowNotEditableWarning()
 
@@ -41,7 +54,7 @@ const childColumn = computed(() => {
 </script>
 
 <template>
-  <div @dblclick="activateShowEditNonEditableFieldWarning">
+  <div @dblclick="activateShowEditNonEditableFieldWarning" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">
     <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 6ea1747351..b41860e5f7 100644
--- a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
+++ b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
@@ -90,13 +90,25 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
     </JsBarcodeWrapper>
   </div>
 
-  <div v-if="tooManyCharsForBarcode" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+  <div
+    v-if="tooManyCharsForBarcode"
+    class="text-left text-wrap text-[#e65100] text-xs"
+    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+  >
     {{ $t('labels.barcodeValueTooLong') }}
   </div>
-  <div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+  <div
+    v-if="showEditNonEditableFieldWarning"
+    class="text-left text-wrap mt-2 text-[#e65100] text-xs"
+    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+  >
     {{ $t('msg.warning.nonEditableFields.computedFieldUnableToClear') }}
   </div>
-  <div v-if="showClearNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+  <div
+    v-if="showClearNonEditableFieldWarning"
+    class="text-left text-wrap mt-2 text-[#e65100] text-xs"
+    :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+  >
     {{ $t('msg.warning.nonEditableFields.barcodeFieldsCannotBeDirectlyChanged') }}
   </div>
 </template>

From aa42962eb20fc9a7db4fbbd4f2a1dbd2673d45d2 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:16 +0000
Subject: [PATCH 06/17] fix(nc-gui): show appropriate validation error for
 create column name input

---
 packages/nc-gui/composables/useColumnCreateStore.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui/composables/useColumnCreateStore.ts b/packages/nc-gui/composables/useColumnCreateStore.ts
index d68a1cea0b..144edcf59f 100644
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui/composables/useColumnCreateStore.ts
@@ -114,6 +114,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
             validator: (rule: any, value: any) => {
               return new Promise<void>((resolve, reject) => {
                 if (
+                  value !== '' &&
                   (tableExplorerColumns?.value || meta.value?.columns)?.some(
                     (c) =>
                       c.id !== formState.value.id && // ignore current column
@@ -126,6 +127,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
                   return reject(new Error(t('msg.error.duplicateSystemColumnName')))
                 }
                 if (
+                  value !== '' &&
                   (tableExplorerColumns?.value || meta.value?.columns)?.some(
                     (c) =>
                       c.id !== formState.value.id && // ignore current column

From b88ce8e0066f2294a1739ac1eb1d5204f3efc495 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:16 +0000
Subject: [PATCH 07/17] fix(nc-gui): maintain a consistent border-radius for
 all fields in the CreateOrUpdate Column modal

---
 .../nc-gui/components/smartsheet/column/EditOrAdd.vue     | 8 ++++----
 .../nc-gui/components/smartsheet/column/LinkOptions.vue   | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 2fdc6c66a4..213205ed9c 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -260,7 +260,7 @@ if (props.fromTableExplorer) {
       <div class="flex flex-col gap-2">
         <a-form-item v-if="isFieldsTab" v-bind="validateInfos.title" class="flex flex-grow">
           <div
-            class="flex flex-grow px-2 py-1 items-center rounded-lg bg-gray-100 focus:bg-gray-100 outline-none"
+            class="flex flex-grow px-2 py-1 items-center rounded-md bg-gray-100 focus:bg-gray-100 outline-none"
             style="outline-style: solid; outline-width: thin"
           >
             <input
@@ -281,7 +281,7 @@ if (props.fromTableExplorer) {
           <a-input
             ref="antInput"
             v-model:value="formState.title"
-            class="nc-column-name-input !rounded !mt-1"
+            class="nc-column-name-input !rounded-md !mt-1"
             :disabled="isKanban || readOnly"
             @input="onAlter(8)"
           />
@@ -297,7 +297,7 @@ if (props.fromTableExplorer) {
             <a-select
               v-model:value="formState.uidt"
               show-search
-              class="nc-column-type-input !rounded"
+              class="nc-column-type-input !rounded-md"
               :disabled="isKanban || readOnly"
               dropdown-class-name="nc-dropdown-column-type border-1 !rounded-md border-gray-200"
               @dropdown-visible-change="onDropdownChange"
@@ -450,7 +450,7 @@ if (props.fromTableExplorer) {
 <style lang="scss">
 .nc-column-type-input {
   .ant-select-selector {
-    @apply !rounded;
+    @apply !rounded-md;
   }
 }
 </style>
diff --git a/packages/nc-gui/components/smartsheet/column/LinkOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkOptions.vue
index 513dec3ba0..cd11d46984 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkOptions.vue
@@ -52,13 +52,13 @@ vModel.value.meta = {
   <a-row class="my-2" gutter="8">
     <a-col :span="12">
       <a-form-item v-bind="validateInfos['meta.singular']" :label="$t('labels.singularLabel')">
-        <a-input v-model:value="vModel.meta.singular" :placeholder="$t('general.link')" class="!w-full nc-link-singular" />
+        <a-input v-model:value="vModel.meta.singular" :placeholder="$t('general.link')" class="!w-full nc-link-singular !rounded-md" />
       </a-form-item>
     </a-col>
 
     <a-col :span="12">
       <a-form-item v-bind="validateInfos['meta.plural']" :label="$t('labels.pluralLabel')">
-        <a-input v-model:value="vModel.meta.plural" :placeholder="$t('general.links')" class="!w-full nc-link-plural" />
+        <a-input v-model:value="vModel.meta.plural" :placeholder="$t('general.links')" class="!w-full nc-link-plural !rounded-md" />
       </a-form-item>
     </a-col>
   </a-row>

From b134ffe21ed15b5c0a25d79ee5cde22fa125725a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:16 +0000
Subject: [PATCH 08/17] fix(nc-gui): lint errors

---
 packages/nc-gui/components/cell/Checkbox.vue         |  3 +--
 packages/nc-gui/components/cell/Currency.vue         |  2 +-
 packages/nc-gui/components/cell/Decimal.vue          |  2 +-
 packages/nc-gui/components/cell/Duration.vue         |  2 +-
 packages/nc-gui/components/cell/Email.vue            |  2 +-
 packages/nc-gui/components/cell/Integer.vue          |  2 +-
 packages/nc-gui/components/cell/Json.vue             |  2 +-
 packages/nc-gui/components/cell/Percent.vue          |  2 +-
 packages/nc-gui/components/cell/Rating.vue           |  2 +-
 packages/nc-gui/components/cell/RichText.vue         |  2 +-
 packages/nc-gui/components/cell/Url.vue              |  2 +-
 .../components/smartsheet/column/LinkOptions.vue     | 12 ++++++++++--
 .../nc-gui/components/virtual-cell/BelongsTo.vue     |  2 +-
 packages/nc-gui/components/virtual-cell/Lookup.vue   |  2 +-
 packages/nc-gui/components/virtual-cell/Rollup.vue   |  4 ++--
 .../components/virtual-cell/components/ListItem.vue  |  2 +-
 16 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index c6bfecc871..38bc569923 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -96,10 +96,9 @@ useSelectedCellKeyupListener(active, (e) => {
       height:
         isForm || isExpandedFormOpen || isGallery || isEditColumnMenu ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
     }"
-    tabindex="0"
+    :tabindex="readOnly ? -1 : 0"
     @click="onClick(false, $event)"
     @keydown.enter.stop="onClick(true, $event)"
-    :tabindex="readOnly ? -1 : 0"
   >
     <div
       class="flex items-center"
diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index f7ca6e7af9..d43e5ac26b 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -6,11 +6,11 @@ import {
   EditModeInj,
   IsExpandedFormOpenInj,
   IsFormInj,
+  ReadonlyInj,
   computed,
   inject,
   parseProp,
   useVModel,
-  ReadonlyInj,
 } from '#imports'
 
 interface Props {
diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index 9cfba6bb87..79cf2f31e2 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, ReadonlyInj } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
   // when we set a number, then it is number type
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index f1facc875d..8805b09031 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -6,6 +6,7 @@ import {
   EditModeInj,
   IsExpandedFormOpenInj,
   IsFormInj,
+  ReadonlyInj,
   computed,
   convertDurationToSeconds,
   convertMS2Duration,
@@ -13,7 +14,6 @@ import {
   inject,
   parseProp,
   ref,
-  ReadonlyInj,
 } from '#imports'
 
 interface Props {
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index b6b4b82bed..065557e818 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -6,11 +6,11 @@ import {
   IsExpandedFormOpenInj,
   IsFormInj,
   IsSurveyFormInj,
+  ReadonlyInj,
   computed,
   inject,
   useI18n,
   validateEmail,
-  ReadonlyInj,
 } from '#imports'
 
 interface Props {
diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue
index 4e042280dd..c9867a1073 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, ReadonlyInj } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
   // when we set a number, then it is number type
diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index 56c4fa96e3..f9c54bf3c7 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -3,6 +3,7 @@ import NcModal from '../nc/Modal.vue'
 import {
   ActiveCellInj,
   EditModeInj,
+  IsExpandedFormOpenInj,
   IsFormInj,
   JsonExpandInj,
   ReadonlyInj,
@@ -13,7 +14,6 @@ import {
   useSelectedCellKeyupListener,
   useVModel,
   watch,
-  IsExpandedFormOpenInj,
 } from '#imports'
 
 interface Props {
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index f0218ed5b5..e6487cf711 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, ReadonlyInj } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue?: number | string | null
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index d044d3214f..8d4553b081 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -3,11 +3,11 @@ import {
   ActiveCellInj,
   ColumnInj,
   IsExpandedFormOpenInj,
+  ReadonlyInj,
   computed,
   inject,
   parseProp,
   useSelectedCellKeyupListener,
-  ReadonlyInj,
 } from '#imports'
 
 interface Props {
diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index fa4be15456..45a0ad85b9 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -8,7 +8,7 @@ import { generateJSON } from '@tiptap/html'
 import Underline from '@tiptap/extension-underline'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
-import { IsExpandedFormOpenInj, RowHeightInj, ReadonlyInj } from '#imports'
+import { IsExpandedFormOpenInj, ReadonlyInj, RowHeightInj } from '#imports'
 
 const props = defineProps<{
   value?: string | null
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index a62b4c6eb4..3ec7125fdf 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -8,6 +8,7 @@ import {
   IsExpandedFormOpenInj,
   IsFormInj,
   IsSurveyFormInj,
+  ReadonlyInj,
   computed,
   inject,
   isValidURL,
@@ -17,7 +18,6 @@ import {
   useCellUrlConfig,
   useI18n,
   watch,
-  ReadonlyInj,
 } from '#imports'
 
 interface Props {
diff --git a/packages/nc-gui/components/smartsheet/column/LinkOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkOptions.vue
index cd11d46984..195f36c017 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkOptions.vue
@@ -52,13 +52,21 @@ vModel.value.meta = {
   <a-row class="my-2" gutter="8">
     <a-col :span="12">
       <a-form-item v-bind="validateInfos['meta.singular']" :label="$t('labels.singularLabel')">
-        <a-input v-model:value="vModel.meta.singular" :placeholder="$t('general.link')" class="!w-full nc-link-singular !rounded-md" />
+        <a-input
+          v-model:value="vModel.meta.singular"
+          :placeholder="$t('general.link')"
+          class="!w-full nc-link-singular !rounded-md"
+        />
       </a-form-item>
     </a-col>
 
     <a-col :span="12">
       <a-form-item v-bind="validateInfos['meta.plural']" :label="$t('labels.pluralLabel')">
-        <a-input v-model:value="vModel.meta.plural" :placeholder="$t('general.links')" class="!w-full nc-link-plural !rounded-md" />
+        <a-input
+          v-model:value="vModel.meta.plural"
+          :placeholder="$t('general.links')"
+          class="!w-full nc-link-plural !rounded-md"
+        />
       </a-form-item>
     </a-col>
   </a-row>
diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index 779267fcd8..9e3e45af01 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@@ -5,6 +5,7 @@ import {
   ActiveCellInj,
   CellValueInj,
   ColumnInj,
+  IsExpandedFormOpenInj,
   IsFormInj,
   IsUnderLookupInj,
   ReadonlyInj,
@@ -18,7 +19,6 @@ import {
   useRoles,
   useSelectedCellKeyupListener,
   useSmartsheetRowStoreOrThrow,
-  IsExpandedFormOpenInj,
 } from '#imports'
 
 const column = inject(ColumnInj)!
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 528901edef..451ec25e07 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -5,6 +5,7 @@ import {
   CellUrlDisableOverlayInj,
   CellValueInj,
   ColumnInj,
+  IsExpandedFormOpenInj,
   IsUnderLookupInj,
   MetaInj,
   computed,
@@ -15,7 +16,6 @@ import {
   useMetas,
   useShowNotEditableWarning,
   watch,
-  IsExpandedFormOpenInj,
 } from '#imports'
 
 const { metas, getMeta } = useMetas()
diff --git a/packages/nc-gui/components/virtual-cell/Rollup.vue b/packages/nc-gui/components/virtual-cell/Rollup.vue
index 34a3a86faf..40b64eac7f 100644
--- a/packages/nc-gui/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui/components/virtual-cell/Rollup.vue
@@ -3,6 +3,7 @@ import type { ColumnType, LinkToAnotherRecordType, RollupType } from 'nocodb-sdk
 import {
   CellValueInj,
   ColumnInj,
+  IsExpandedFormOpenInj,
   MetaInj,
   computed,
   inject,
@@ -10,7 +11,6 @@ import {
   ref,
   useMetas,
   useShowNotEditableWarning,
-  IsExpandedFormOpenInj,
 } from '#imports'
 
 const { metas } = useMetas()
@@ -54,7 +54,7 @@ const childColumn = computed(() => {
 </script>
 
 <template>
-  <div @dblclick="activateShowEditNonEditableFieldWarning" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">
+  <div :class="isExpandedFormOpen ? 'px-2' : 'px-0'" @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/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
index 8bcaac521b..6cb49e0848 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
@@ -5,6 +5,7 @@ import {
   IsExpandedFormOpenInj,
   IsFormInj,
   IsPublicInj,
+  ReadonlyInj,
   RowHeightInj,
   computed,
   inject,
@@ -13,7 +14,6 @@ import {
   ref,
   useAttachment,
   useVModel,
-  ReadonlyInj,
 } from '#imports'
 import MaximizeIcon from '~icons/nc-icons/maximize'
 import LinkIcon from '~icons/nc-icons/link'

From 7c662c19aa5538fcd76b4792cbac2f3249a05795 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:16 +0000
Subject: [PATCH 09/17] fic(nc-gui): Error when adding sort nocodb/nocodb#7460

---
 .../nc-gui/components/smartsheet/toolbar/SortListMenu.vue     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index a96d6bc6ac..5873056e2b 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -132,7 +132,7 @@ onMounted(() => {
       >
         <div
           class="sort-grid max-h-120 nc-scrollbar-md"
-          :class="{ 'pb-3 pr-3.5': sorts?.length, '!pb-0': !availableColumns.length }"
+          :class="{ 'pr-3.5': sorts?.length }"
           @click.stop
         >
           <template v-for="(sort, i) of sorts" :key="i">
@@ -187,6 +187,7 @@ onMounted(() => {
           v-if="availableColumns.length"
           v-model:visible="showCreateSort"
           :trigger="['click']"
+          class="mt-3"
           overlay-class-name="nc-toolbar-dropdown"
         >
           <template v-if="isEeUI && !isPublic">
@@ -204,6 +205,7 @@ onMounted(() => {
                 {{ $t('activity.addSort') }}
               </div>
             </NcButton>
+            <span v-else></span>
           </template>
           <template v-else>
             <NcButton v-e="['c:sort:add']" class="!text-brand-500" type="text" size="small" @click.stop="showCreateSort = true">

From 5db4f6533b8ffb2162f0f62b41c2880c13bb3553 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:16 +0000
Subject: [PATCH 10/17] fix(nc-gui): pw test fail issue

---
 packages/nc-gui/components/cell/Percent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index e6487cf711..7cd706639e 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -128,7 +128,7 @@ const onTabPress = (e: KeyboardEvent) => {
     @focus="onWrapperFocus"
   >
     <input
-      v-if="!readOnly && editEnabled && expandedEditEnabled"
+      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"

From 26982ea95499dd7e976b7c4b8b0bd1dc7a980560 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 11/17] fix(nc-gui): lint errors

---
 .../nc-gui/components/smartsheet/toolbar/SortListMenu.vue   | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 5873056e2b..f16dc72f60 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -130,11 +130,7 @@ onMounted(() => {
         class="py-6 pl-6 nc-filter-list max-h-[max(80vh,30rem)]"
         data-testid="nc-sorts-menu"
       >
-        <div
-          class="sort-grid max-h-120 nc-scrollbar-md"
-          :class="{ 'pr-3.5': sorts?.length }"
-          @click.stop
-        >
+        <div class="sort-grid max-h-120 nc-scrollbar-md" :class="{ 'pr-3.5': sorts?.length }" @click.stop>
           <template v-for="(sort, i) of sorts" :key="i">
             <SmartsheetToolbarFieldListAutoCompleteDropdown
               v-model="sort.fk_column_id"

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 12/17] 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>

From 24f4dcbcbed44b9f019833d5e5c2563ecd3be13d 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 13/17] fix(nc-gui): keep header cell icon size consistent

---
 packages/nc-gui/assets/style.scss                   | 13 +++++++++----
 .../components/smartsheet/expanded-form/index.vue   |  2 +-
 .../nc-gui/components/smartsheet/header/CellIcon.ts |  2 +-
 .../components/smartsheet/header/VirtualCellIcon.ts |  2 +-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 7060905b0a..f4f2e72778 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -714,7 +714,7 @@ input[type='number'] {
   }
 
   .nc-sidebar-node-btn:not(.nc-sidebar-expand) {
-    @apply !xs:(hidden)
+    @apply !xs:(hidden);
   }
 }
 
@@ -727,13 +727,18 @@ input[type='number'] {
   @apply xs:(opacity-100 hover:bg-gray-50);
 
   .nc-icon {
-    @apply xs:(visible opacity-100 !text-gray-500)
+    @apply xs:(visible opacity-100 !text-gray-500);
   }
 }
 
 .ant-message-notice-content {
   @apply !rounded-md;
   .ant-message-custom-content{
-    @apply flex items-center
+    @apply flex items-center;
   }
-}
\ No newline at end of file
+}
+
+svg.nc-cell-icon, svg.nc-virtual-cell-icon {
+  @apply w-1em h-1em flex-none;
+  font-size: 1rem;
+}
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 9e0b3ff545..67258910c8 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -698,7 +698,7 @@ export default {
                     :ref="i ? null : (el: any) => (cellWrapperEl = el)"
                     class="bg-white w-80 xs:w-full px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
                     :class="{
-                      '!bg-gray-50 !px-0 !select-text nc-system-field': isReadOnlyVirtualCell(col),
+                      '!bg-gray-50 !select-text nc-system-field': isReadOnlyVirtualCell(col),
                     }"
                   >
                     <LazySmartsheetVirtualCell
diff --git a/packages/nc-gui/components/smartsheet/header/CellIcon.ts b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
index 69e13f80fe..d7152e368b 100644
--- a/packages/nc-gui/components/smartsheet/header/CellIcon.ts
+++ b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
@@ -125,7 +125,7 @@ export default defineComponent({
       if (!column.value && !columnMeta.value) return null
 
       return h(renderIcon((columnMeta.value ?? column.value)!, abstractType.value), {
-        class: 'text-inherit mx-1',
+        class: 'text-inherit mx-1 nc-cell-icon',
       })
     }
   },
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts b/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
index 2a884ff1b6..6b547e1801 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
@@ -104,7 +104,7 @@ export default defineComponent({
 
       const { icon: Icon, color } = renderIcon(column.value, relationColumn)
 
-      return h(Icon, { class: `${color} mx-1` })
+      return h(Icon, { class: `${color} mx-1 nc-virtual-cell-icon` })
     }
   },
 })

From 517cb9e2cae34faa3838b634f0fe24b41ff67c9f 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 14/17] fix(nc-gui): small changes

---
 packages/nc-gui/components/cell/RichText.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index 45a0ad85b9..fecd9c0e4c 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -193,7 +193,6 @@ watch(editorDom, () => {
     <CellRichTextLinkOptions v-if="editor" :editor="editor" />
     <EditorContent
       ref="editorDom"
-      :disabled="readOnly"
       :editor="editor"
       class="flex flex-col nc-textarea-rich-editor w-full"
       :class="{

From 2c65226f11716b493cde413442cf2a4b43bf66be 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 15/17] fix(nc-gui): hide reload record in shared view &
 disable change view icon in shared base

---
 .../components/dashboard/TreeView/ViewsNode.vue      |  2 +-
 .../components/smartsheet/expanded-form/index.vue    | 12 ++++--------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index d462709705..4a5525df75 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -222,7 +222,7 @@ watch(isDropdownOpen, async () => {
           :emoji="props.view?.meta?.icon"
           size="small"
           :clearable="true"
-          :readonly="isMobileMode"
+          :readonly="isMobileMode || !isUIAllowed('viewCreateOrEdit')"
           @emoji-selected="emits('selectIcon', $event)"
         >
           <template #default>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 67258910c8..623bf68710 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -570,7 +570,7 @@ export default {
                 {{ isRecordLinkCopied ? $t('labels.copiedRecordURL') : $t('labels.copyRecordURL') }}
               </div>
             </NcButton>
-            <NcDropdown v-if="!isNew" placement="bottomRight">
+            <NcDropdown v-if="!isNew && isUIAllowed('dataEdit')" placement="bottomRight">
               <NcButton type="secondary" class="nc-expand-form-more-actions w-10" :disabled="isLoading">
                 <GeneralIcon icon="threeDotVertical" class="text-md" :class="isLoading ? 'text-gray-300' : 'text-gray-700'" />
               </NcButton>
@@ -582,7 +582,7 @@ export default {
                       {{ $t('general.reload') }}
                     </div>
                   </NcMenuItem>
-                  <NcMenuItem v-if="isUIAllowed('dataEdit')" class="text-gray-700" @click="!isNew ? onDuplicateRow() : () => {}">
+                  <NcMenuItem class="text-gray-700" @click="!isNew ? onDuplicateRow() : () => {}">
                     <div
                       v-e="['c:row-expand:duplicate']"
                       data-testid="nc-expanded-form-duplicate"
@@ -594,12 +594,8 @@ export default {
                       </span>
                     </div>
                   </NcMenuItem>
-                  <NcDivider v-if="isUIAllowed('dataEdit')" />
-                  <NcMenuItem
-                    v-if="isUIAllowed('dataEdit')"
-                    class="!text-red-500 !hover:bg-red-50"
-                    @click="!isNew && onDeleteRowClick()"
-                  >
+                  <NcDivider />
+                  <NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="!isNew && onDeleteRowClick()">
                     <div v-e="['c:row-expand:delete']" data-testid="nc-expanded-form-delete" class="flex gap-2 items-center">
                       <component :is="iconMap.delete" class="cursor-pointer nc-delete-row" />
                       <span class="-ml-0.25">

From a8f5cb462d9ead34888cc3f8f35dd1fb2dc5a900 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 16/17] fix(nc-gui): small changes

---
 packages/nc-gui/components/smartsheet/expanded-form/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 623bf68710..163ed9cf28 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -570,7 +570,7 @@ export default {
                 {{ isRecordLinkCopied ? $t('labels.copiedRecordURL') : $t('labels.copyRecordURL') }}
               </div>
             </NcButton>
-            <NcDropdown v-if="!isNew && isUIAllowed('dataEdit')" placement="bottomRight">
+            <NcDropdown v-if="!isNew && rowId" placement="bottomRight">
               <NcButton type="secondary" class="nc-expand-form-more-actions w-10" :disabled="isLoading">
                 <GeneralIcon icon="threeDotVertical" class="text-md" :class="isLoading ? 'text-gray-300' : 'text-gray-700'" />
               </NcButton>

From edaae1b2fea407b44a710fd632a05ad2d36df87f 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 17/17] fix(nc-gui): show duplicate and delete record only in
 user has edit access

---
 .../components/smartsheet/expanded-form/index.vue      | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 163ed9cf28..94fd19965c 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -582,7 +582,7 @@ export default {
                       {{ $t('general.reload') }}
                     </div>
                   </NcMenuItem>
-                  <NcMenuItem class="text-gray-700" @click="!isNew ? onDuplicateRow() : () => {}">
+                  <NcMenuItem v-if="isUIAllowed('dataEdit')" class="text-gray-700" @click="!isNew ? onDuplicateRow() : () => {}">
                     <div
                       v-e="['c:row-expand:duplicate']"
                       data-testid="nc-expanded-form-duplicate"
@@ -594,8 +594,12 @@ export default {
                       </span>
                     </div>
                   </NcMenuItem>
-                  <NcDivider />
-                  <NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="!isNew && onDeleteRowClick()">
+                  <NcDivider v-if="isUIAllowed('dataEdit')" />
+                  <NcMenuItem
+                    v-if="isUIAllowed('dataEdit')"
+                    class="!text-red-500 !hover:bg-red-50"
+                    @click="!isNew && onDeleteRowClick()"
+                  >
                     <div v-e="['c:row-expand:delete']" data-testid="nc-expanded-form-delete" class="flex gap-2 items-center">
                       <component :is="iconMap.delete" class="cursor-pointer nc-delete-row" />
                       <span class="-ml-0.25">