fix: field alignment issue in expanded form

packages/nc-gui/components/cell/Currency.vue

@@ -78,7 +78,10 @@ onMounted(() => {
     :ref="focus"
     v-model="vModel"
     type="number"
-    class="w-full h-full text-sm border-none rounded-md outline-none focus:outline-transparent focus:ring-0"
+    class="w-full h-full text-sm border-none rounded-md px-0 py-1 outline-none focus:outline-none focus:ring-0"
+    :class="{
+      '!px-2': isExpandedFormOpen,
+    }"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
     @blur="submitCurrency"
     @keydown.down.stop

packages/nc-gui/components/cell/DatePicker.vue

@@ -20,6 +20,7 @@ import {
   useI18n,
   useSelectedCellKeyupListener,
   watch,
+  IsExpandedFormOpenInj,
 } from '#imports'
 
 interface Props {
@@ -41,6 +42,8 @@ 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))
@@ -240,8 +243,8 @@ const clickHandler = () => {
     :picker="picker"
     tabindex="0"
     :bordered="false"
-    class="!w-full !px-1 !border-none"
-    :class="{ 'nc-null': modelValue === null && showNull }"
+    class="!w-full !py-1 !border-none"
+    :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
     :format="dateFormat"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"

packages/nc-gui/components/cell/DateTimePicker.vue

@@ -14,6 +14,7 @@ import {
   useBase,
   useSelectedCellKeyupListener,
   watch,
+  IsExpandedFormOpenInj,
 } from '#imports'
 
 interface Props {
@@ -39,6 +40,8 @@ const { t } = useI18n()
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
+
 const column = inject(ColumnInj)!
 
 const isDateInvalid = ref(false)
@@ -293,8 +296,8 @@ const isColDisabled = computed(() => {
     :disabled="isColDisabled"
     :show-time="true"
     :bordered="false"
-    class="!w-full !px-0 !py-1 !border-none"
-    :class="{ 'nc-null': modelValue === null && showNull }"
+    class="!w-full !py-1 !border-none"
+    :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
     :format="dateTimeFormat"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"

packages/nc-gui/components/cell/Decimal.vue

@@ -94,7 +94,10 @@ watch(isExpandedFormOpen, () => {
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="outline-none !py-2 !px-1 border-none rounded-md w-full h-full !text-sm"
+    class="outline-none px-0 py-1 border-none rounded-md w-full h-full !text-sm"
+    :class="{
+      '!px-2': isExpandedFormOpen,
+    }"
     type="number"
     :step="precision"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"

packages/nc-gui/components/cell/Duration.vue

@@ -92,8 +92,10 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value
       v-if="editEnabled"
       :ref="focus"
       v-model="localState"
-      class="w-full !border-none !outline-none p-0"
-      :class="{ '!px-2 !py-1': editEnabled }"
+      class="w-full !border-none !outline-none px-0 py-1"
+      :class="{
+        '!px-2': isExpandedFormOpen,
+      }"
       :placeholder="durationPlaceholder"
       @blur="submitDuration"
       @keypress="checkDurationFormat($event)"

packages/nc-gui/components/cell/Email.vue

@@ -70,7 +70,10 @@ watch(
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="w-full outline-none text-sm px-1 py-2"
+    class="w-full outline-none text-sm px-0 py-1"
+    :class="{
+      '!px-2': isExpandedFormOpen,
+    }"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
     @blur="editEnabled = false"
     @keydown.down.stop

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, iconMap, latLongToJoinedString, useVModel } from '#imports'
+import { Modal as AModal, iconMap, latLongToJoinedString, useVModel, IsExpandedFormOpenInj } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -16,6 +16,8 @@ const emits = defineEmits<Emits>()
 
 const vModel = useVModel(props, 'modelValue', emits)
 
+const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
+
 const isExpanded = ref(false)
 
 const isLoading = ref(false)
@@ -103,7 +105,10 @@ const openInOSM = () => {
       v-else
       data-testid="nc-geo-data-lat-long-set"
       tabindex="0"
-      class="focus-visible:!outline-none focus:!outline-none h-full w-full flex items-center"
+      class="h-full w-full flex items-center py-1 focus-visible:!outline-none focus:!outline-none"
+      :class="{
+        'px-2': isExpandedFormOpen,
+      }"
     >
       {{ latLongStr }}
     </div>

packages/nc-gui/components/cell/Integer.vue

@@ -85,11 +85,11 @@ function onKeyDown(e: any) {
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="outline-none py-2 px-1 border-none w-full h-full text-sm"
-    type="number"
+    class="outline-none px-0 py-1 border-none w-full h-full text-sm"
     :class="{
-      'pl-2': isExpandedFormOpen,
+      '!px-2': isExpandedFormOpen,
     }"
+    type="number"
     style="letter-spacing: 0.06rem"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
     @blur="editEnabled = false"

packages/nc-gui/components/cell/MultiSelect.vue

@@ -27,6 +27,7 @@ import {
   useRoles,
   useSelectedCellKeyupListener,
   watch,
+  IsExpandedFormOpenInj,
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
@@ -63,6 +64,8 @@ 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,6 +358,9 @@ const onFocus = () => {
     <div
       v-if="!active"
       class="flex flex-wrap"
+      :class="{
+        '!px-2': isExpandedFormOpen,
+      }"
       :style="{
         'display': '-webkit-box',
         'max-width': '100%',
@@ -407,7 +413,7 @@ const onFocus = () => {
       :show-arrow="editAllowed && !readOnly"
       :open="isOpen && editAllowed"
       :disabled="readOnly || !editAllowed"
-      :class="{ 'caret-transparent': !hasEditRoles }"
+      :class="{ 'caret-transparent': !hasEditRoles, '!px-2': isExpandedFormOpen }"
       :dropdown-class-name="`nc-dropdown-multi-select-cell !min-w-200px ${isOpen ? 'active' : ''}`"
       @search="search"
       @keydown="onKeyDown"

packages/nc-gui/components/cell/Percent.vue

@@ -117,11 +117,13 @@ const onTabPress = (e: KeyboardEvent) => {
     @focus="onWrapperFocus"
   >
     <input
-      v-if="(!isExpandedFormOpen && editEnabled) || (isExpandedFormOpen && expandedEditEnabled)"
+      v-if="editEnabled"
       :ref="focus"
       v-model="vModel"
-      class="w-full !text-sm !border-none !outline-none focus:ring-0 text-base p-1"
-      :class="{ '!px-2': editEnabled }"
+      class="w-full !text-sm !border-none !outline-none focus:ring-0 text-base px-0 py-1"
+      :class="{
+        '!px-2': isExpandedFormOpen,
+      }"
       type="number"
       :placeholder="isEditColumn ? $t('labels.optional') : ''"
       @blur="onBlur"

packages/nc-gui/components/cell/PhoneNumber.vue

@@ -62,7 +62,10 @@ watch(
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="w-full outline-none text-sm px-1 py-2"
+    class="w-full outline-none text-sm px-0 py-1"
+    :class="{
+      '!px-2': isExpandedFormOpen,
+    }"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
     @blur="editEnabled = false"
     @keydown.down.stop

packages/nc-gui/components/cell/Rating.vue

@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { ActiveCellInj, ColumnInj, computed, inject, parseProp, useSelectedCellKeyupListener } from '#imports'
+import {
+  ActiveCellInj,
+  ColumnInj,
+  computed,
+  inject,
+  parseProp,
+  useSelectedCellKeyupListener,
+  IsExpandedFormOpenInj,
+} from '#imports'
 
 interface Props {
   modelValue?: number | null | undefined
@@ -13,6 +21,8 @@ const column = inject(ColumnInj)!
 
 const readonly = inject(ReadonlyInj, ref(false))
 
+const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
+
 const ratingMeta = computed(() => {
   return {
     icon: {
@@ -65,7 +75,7 @@ watch(rateDomRef, () => {
     v-model:value="vModel"
     :disabled="readonly"
     :count="ratingMeta.max"
-    :style="`color: ${ratingMeta.color}; padding: 0px 5px`"
+    :style="`color: ${ratingMeta.color}; padding: ${isExpandedFormOpen ? '0px 8px' : '0px 5px'};`"
     @keydown="onKeyPress"
   >
     <template #character>

packages/nc-gui/components/cell/SingleSelect.vue

@@ -23,6 +23,7 @@ import {
   useRoles,
   useSelectedCellKeyupListener,
   watch,
+  IsExpandedFormOpenInj,
 } from '#imports'
 
 interface Props {
@@ -47,6 +48,8 @@ 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)
@@ -276,7 +279,13 @@ const onFocus = () => {
     @click="toggleMenu"
     @keydown.enter.stop.prevent="toggleMenu"
   >
-    <div v-if="!(active || isEditable)" class="w-full">
+    <div
+      v-if="!(active || isEditable)"
+      class="w-full"
+      :class="{
+        '!px-2': isExpandedFormOpen,
+      }"
+    >
       <a-tag v-if="selectedOpt" class="rounded-tag max-w-full" :color="selectedOpt.color">
         <span
           :style="{
@@ -311,7 +320,7 @@ const onFocus = () => {
       ref="aselect"
       v-model:value="vModel"
       class="w-full overflow-hidden xs:min-h-12"
-      :class="{ 'caret-transparent': !hasEditRoles }"
+      :class="{ 'caret-transparent': !hasEditRoles, '!px-2': isExpandedFormOpen }"
       :placeholder="isEditColumn ? $t('labels.optional') : ''"
       :allow-clear="!column.rqd && editAllowed"
       :bordered="false"

packages/nc-gui/components/cell/Text.vue

@@ -32,11 +32,11 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value
     v-if="!readonly && editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="h-full w-full outline-none p-2 bg-transparent"
-    :placeholder="isEditColumn ? $t('labels.optional') : ''"
+    class="h-full w-full outline-none py-1 bg-transparent"
     :class="{
-      'px-1': isExpandedFormOpen,
+      'px-2': isExpandedFormOpen,
     }"
+    :placeholder="isEditColumn ? $t('labels.optional') : ''"
     @blur="editEnabled = false"
     @keydown.down.stop
     @keydown.left.stop

packages/nc-gui/components/cell/TextArea.vue

@@ -204,7 +204,7 @@ watch(editEnabled, () => {
         :class="{
           'p-2': editEnabled,
           'py-1 h-full': isForm,
-          'px-1': isExpandedFormOpen,
+          'px-2': isExpandedFormOpen,
         }"
         :style="{
           minHeight: `${height}px`,

packages/nc-gui/components/cell/TimePicker.vue

@@ -9,6 +9,7 @@ import {
   useBase,
   useSelectedCellKeyupListener,
   watch,
+  IsExpandedFormOpenInj,
 } from '#imports'
 
 interface Props {
@@ -34,6 +35,8 @@ 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'
@@ -130,8 +133,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :bordered="false"
     use12-hours
     format="HH:mm"
-    class="!w-full !px-1 !border-none"
-    :class="{ 'nc-null': modelValue === null && showNull }"
+    class="!w-full !py-1 !border-none"
+    :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"

packages/nc-gui/components/cell/Url.vue

@@ -92,7 +92,10 @@ watch(
       :ref="focus"
       v-model="vModel"
       :placeholder="isEditColumn ? $t('labels.enterDefaultUrlOptional') : ''"
-      class="outline-none text-sm w-full px-2 py-2 bg-transparent h-full"
+      class="outline-none text-sm w-full px-0 py-1 bg-transparent h-full"
+      :class="{
+        '!px-2': isExpandedFormOpen,
+      }"
       @blur="editEnabled = false"
       @keydown.down.stop
       @keydown.left.stop

packages/nc-gui/components/cell/User.vue

@@ -22,6 +22,7 @@ import {
   useRoles,
   useSelectedCellKeyupListener,
   watch,
+  IsExpandedFormOpenInj,
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
@@ -48,6 +49,8 @@ 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)
@@ -264,6 +267,9 @@ const filterOption = (input: string, option: any) => {
     <div
       v-if="!active"
       class="flex flex-wrap"
+      :class="{
+        '!px-2': isExpandedFormOpen,
+      }"
       :style="{
         'display': '-webkit-box',
         'max-width': '100%',
@@ -302,7 +308,7 @@ const filterOption = (input: string, option: any) => {
       :show-arrow="editAllowed && !readOnly"
       :open="isOpen && editAllowed"
       :disabled="readOnly || !editAllowed"
-      :class="{ 'caret-transparent': !hasEditRoles }"
+      :class="{ 'caret-transparent': !hasEditRoles, '!px-2': isExpandedFormOpen }"
       :dropdown-class-name="`nc-dropdown-user-select-cell ${isOpen ? 'active' : ''}`"
       :filter-option="filterOption"
       @search="search"

packages/nc-gui/components/cell/YearPicker.vue

@@ -10,6 +10,7 @@ import {
   ref,
   useSelectedCellKeyupListener,
   watch,
+  IsExpandedFormOpenInj,
 } from '#imports'
 
 interface Props {
@@ -31,6 +32,8 @@ 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()
@@ -113,11 +116,11 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
 <template>
   <a-date-picker
     v-model:value="localState"
-    tabindex="0"
+    :tabindex="0"
     picker="year"
     :bordered="false"
-    class="!w-full !px-1 !border-none"
-    :class="{ 'nc-null': modelValue === null && showNull }"
+    class="!w-full !py-1 !border-none"
+    :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
     :placeholder="placeholder"
     :allow-clear="(!readOnly && !localState && !isPk) || isEditColumn"
     :input-read-only="true"

packages/nc-gui/components/cell/attachment/index.vue

@@ -184,7 +184,7 @@ const onImageClick = (item: any) => {
       height: isForm || isExpandedForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
     }"
     class="nc-attachment-cell relative flex color-transition flex items-center w-full xs:(min-h-12 max-h-32)"
-    :class="{ 'justify-center': !active, 'justify-between': active }"
+    :class="{ 'justify-center': !active, 'justify-between': active, 'px-2': isExpandedForm }"
   >
     <LazyCellAttachmentCarousel />
 

packages/nc-gui/components/virtual-cell/Formula.vue

@@ -2,13 +2,24 @@
 import { handleTZ } from 'nocodb-sdk'
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { CellValueInj, ColumnInj, computed, inject, renderValue, replaceUrlsWithLink, useBase } from '#imports'
+import {
+  CellValueInj,
+  ColumnInj,
+  computed,
+  inject,
+  renderValue,
+  replaceUrlsWithLink,
+  useBase,
+  IsExpandedFormOpenInj,
+} 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(() =>
@@ -30,7 +41,14 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
       <span>ERR!</span>
     </a-tooltip>
 
-    <div v-else class="py-2" @dblclick="activateShowEditNonEditableFieldWarning">
+    <div
+      v-else
+      class="py-1"
+      :class="{
+        'px-2': isExpandedFormOpen,
+      }"
+      @dblclick="activateShowEditNonEditableFieldWarning"
+    >
       <div v-if="urls" v-html="urls" />
 
       <div v-else>{{ result }}</div>

packages/nc-gui/components/virtual-cell/Links.vue

@@ -3,7 +3,15 @@ import { computed } from '@vue/reactivity'
 import type { ColumnType } from 'nocodb-sdk'
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import { ActiveCellInj, CellValueInj, ColumnInj, IsUnderLookupInj, inject, useSelectedCellKeyupListener } from '#imports'
+import {
+  ActiveCellInj,
+  CellValueInj,
+  ColumnInj,
+  IsUnderLookupInj,
+  inject,
+  useSelectedCellKeyupListener,
+  IsExpandedFormOpenInj,
+} from '#imports'
 
 const value = inject(CellValueInj, ref(0))
 
@@ -19,6 +27,8 @@ 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)
@@ -120,7 +130,13 @@ watch([listItemsDlg], () => {
 </script>
 
 <template>
-  <div class="flex w-full group items-center nc-links-wrapper" @dblclick.stop="openChildList">
+  <div
+    class="flex w-full group items-center nc-links-wrapper py-1"
+    :class="{
+      'px-2': isExpandedFormOpen,
+    }"
+    @dblclick.stop="openChildList"
+  >
     <div class="block flex-shrink truncate">
       <component
         :is="isUnderLookup ? 'span' : 'a'"