Fix/expanded record ux

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

@@ -84,7 +84,7 @@ useSelectedCellKeyupListener(active, (e) => {
 
 <template>
   <div
-    class="flex cursor-pointer w-full h-full items-center focus:outline-transparent"
+    class="flex cursor-pointer w-full h-full items-center focus:outline-none"
     :class="{
       'w-full flex-start pl-2': isForm || isGallery || isExpandedFormOpen,
       'w-full justify-center': !isForm && !isGallery && !isExpandedFormOpen,
@@ -97,7 +97,7 @@ useSelectedCellKeyupListener(active, (e) => {
     }"
     tabindex="0"
     @click="onClick(false, $event)"
-    @keydown.enter.stop="onClick(false, $event)"
+    @keydown.enter.stop="onClick(true, $event)"
   >
     <div
       class="flex items-center"

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
@@ -99,3 +102,17 @@ onMounted(() => {
   <!-- possibly unexpected string / null with showNull == false  -->
   <span v-else />
 </template>
+
+<style lang="scss" scoped>
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+</style>

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

@@ -7,6 +7,7 @@ import {
   ColumnInj,
   EditColumnInj,
   EditModeInj,
+  IsExpandedFormOpenInj,
   ReadonlyInj,
   computed,
   inject,
@@ -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

@@ -6,6 +6,7 @@ import {
   CellClickHookInj,
   ColumnInj,
   EditColumnInj,
+  IsExpandedFormOpenInj,
   ReadonlyInj,
   inject,
   isDrawerOrModalExist,
@@ -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, IsExpandedFormOpenInj, iconMap, latLongToJoinedString, useVModel } 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)
@@ -86,7 +88,8 @@ const openInOSM = () => {
   <a-dropdown :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" :trigger="['click']">
     <div
       v-if="!isLocationSet"
-      class="group cursor-pointer flex gap-1 items-center mx-auto max-w-64 justify-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+      class="group cursor-pointer flex gap-1 items-center mx-auto max-w-64 justify-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500) my-1"
+      tabindex="0"
     >
       <div class="flex items-center gap-2" data-testid="nc-geo-data-set-location-button">
         <component
@@ -98,7 +101,17 @@ const openInOSM = () => {
         </div>
       </div>
     </div>
-    <div v-else data-testid="nc-geo-data-lat-long-set">{{ latLongStr }}</div>
+    <div
+      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,
+      }"
+    >
+      {{ latLongStr }}
+    </div>
     <template #overlay>
       <a-form :model="formState" class="flex flex-col w-max-64 border-1 border-gray-200" @finish="handleFinish">
         <a-form-item>

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

@@ -8,6 +8,7 @@ import {
   ColumnInj,
   EditColumnInj,
   EditModeInj,
+  IsExpandedFormOpenInj,
   IsKanbanInj,
   ReadonlyInj,
   RowHeightInj,
@@ -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

@@ -69,6 +69,7 @@ const onWrapperFocus = () => {
 
   nextTick(() => {
     wrapperRef.value?.querySelector('input')?.focus()
+    wrapperRef.value?.querySelector('input')?.select()
   })
 }
 
@@ -117,11 +118,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"
@@ -150,3 +153,17 @@ const onTabPress = (e: KeyboardEvent) => {
     <span v-else>{{ vModel }}&nbsp;</span>
   </div>
 </template>
+
+<style lang="scss" scoped>
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+</style>

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,
+  IsExpandedFormOpenInj,
+  computed,
+  inject,
+  parseProp,
+  useSelectedCellKeyupListener,
+} 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/RichText.vue

@@ -156,11 +156,12 @@ watch(editorDom, () => {
 
 <template>
   <div
-    class="h-full"
+    class="h-full focus:!outline-none focus-visible:!outline-none"
     :class="{
       'flex flex-col flex-grow nc-rich-text-full': props.fullMode,
       'nc-rich-text-embed flex flex-col pl-1 w-full': !props.fullMode,
     }"
+    tabindex="0"
   >
     <div v-if="props.showMenu" class="absolute top-0 right-0.5">
       <CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode />

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

@@ -8,6 +8,7 @@ import {
   ColumnInj,
   EditColumnInj,
   EditModeInj,
+  IsExpandedFormOpenInj,
   IsFormInj,
   IsKanbanInj,
   ReadonlyInj,
@@ -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