fix(nc-gui): json & virtual fields spacing issue

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>
 

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"

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"
     >

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"

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>

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>