fix(nc-gui): cell styles

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

@@ -48,14 +48,14 @@ function onClick() {
   <div
     class="flex"
     :class="{
-      'justify-center': !isForm,
+      'justify-center': !isForm && !readOnly,
       'w-full': isForm,
       'nc-cell-hover-show': !vModel && !readOnly,
       'opacity-0': readOnly && !vModel,
     }"
     @click="onClick"
   >
-    <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }">
+    <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel, '!ml-[-8px]': readOnly }">
       <component
         :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
         :style="{

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

@@ -45,7 +45,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="w-full h-full border-none outline-none"
+    class="w-full h-full border-none outline-none px-2"
     @blur="editEnabled = false"
   />
 

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

@@ -62,7 +62,7 @@ const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
   <a-date-picker
     v-model:value="localState"
     :bordered="false"
-    class="!w-full px-1"
+    class="!w-full !px-0 !border-none"
     :format="dateFormat"
     :placeholder="placeholder"
     :allow-clear="!readOnly"

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

@@ -62,7 +62,7 @@ watch(
     v-model:value="localState"
     :show-time="true"
     :bordered="false"
-    class="!w-full px-1"
+    class="!w-full !px-0 !border-none"
     format="YYYY-MM-DD HH:mm"
     :placeholder="isDateInvalid ? 'Invalid date' : ''"
     :allow-clear="!readOnly"

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

@@ -26,7 +26,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="outline-none p-0 border-none w-full h-full text-sm"
+    class="outline-none px-2 border-none w-full h-full text-sm"
     type="number"
     step="0.1"
     @blur="editEnabled = false"

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

@@ -75,6 +75,8 @@ const submitDuration = () => {
       v-if="editEnabled"
       ref="durationInput"
       v-model="localState"
+      class="w-full !border-none p-0"
+      :class="{ '!p-2': editEnabled }"
       :placeholder="durationPlaceholder"
       @blur="submitDuration"
       @keypress="checkDurationFormat($event)"
@@ -91,14 +93,8 @@ const submitDuration = () => {
 </template>
 
 <style scoped>
-.duration-cell-wrapper {
-  padding: 10px;
-}
-
 .duration-warning {
-  text-align: left;
-  margin-top: 10px;
-  color: #e65100;
+  @apply text-left mt-[10px] text-[#e65100];
 }
 </style>
 

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

@@ -24,7 +24,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm" @blur="editEnabled = false" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm px-2" @blur="editEnabled = false" />
 
   <a v-else-if="validEmail" class="text-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}

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

@@ -137,6 +137,7 @@ watch(isOpen, (n, _o) => {
     :show-search="false"
     :open="isOpen"
     :disabled="readOnly"
+    :class="{ '!ml-[-8px]': readOnly }"
     dropdown-class-name="nc-dropdown-multi-select-cell"
     @keydown="handleKeys"
     @click="isOpen = !isOpen"

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

@@ -15,7 +15,12 @@ const vModel = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
-  <input v-if="editEnabled" v-model="vModel" type="number" />
-
+  <input
+    v-if="editEnabled"
+    v-model="vModel"
+    class="w-full !border-none text-base"
+    :class="{ '!p-2': editEnabled }"
+    type="number"
+  />
   <span v-else>{{ vModel }}</span>
 </template>

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

@@ -32,7 +32,13 @@ const vModel = computed({
 </script>
 
 <template>
-  <a-rate v-model:value="vModel" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`" :disabled="!editEnabled">
+  <a-rate
+    v-model:value="vModel"
+    :count="ratingMeta.max"
+    :style="`color: ${ratingMeta.color}; padding: 0px 5px`"
+    :class="{ '!ml-[-8px]': !editEnabled }"
+    :disabled="!editEnabled"
+  >
     <template #character>
       <MdiStar v-if="ratingMeta.icon.full === 'mdi-star'" class="text-sm" />
       <MdiHeart v-if="ratingMeta.icon.full === 'mdi-heart'" class="text-sm" />

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

@@ -69,12 +69,13 @@ watch(isOpen, (n, _o) => {
   <a-select
     ref="aselect"
     v-model:value="vModel"
-    class="w-full"
+    class="w-full 2"
     :allow-clear="!column.rqd && active"
     :bordered="false"
     :open="isOpen"
     :disabled="readOnly"
     :show-arrow="!readOnly && (active || vModel === null)"
+    :class="{ '!ml-[-12px]': readOnly }"
     dropdown-class-name="nc-dropdown-single-select-cell"
     @select="isOpen = false"
     @keydown="handleKeys"

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

@@ -23,6 +23,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     :ref="focus"
     v-model="vModel"
     class="h-full w-full outline-none bg-transparent"
+    :class="{ '!p-2': editEnabled }"
     @blur="editEnabled = false"
   />
 

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

@@ -21,7 +21,8 @@ const focus: VNodeRef = (el) => (el as HTMLTextAreaElement)?.focus()
     :ref="focus"
     v-model="vModel"
     rows="4"
-    class="h-full w-full min-h-[60px] outline-none"
+    class="h-full w-full min-h-[60px] outline-none border-none"
+    :class="{ 'p-2': editEnabled }"
     @blur="editEnabled = false"
     @keydown.alt.enter.stop
     @keydown.shift.enter.stop

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

@@ -74,7 +74,7 @@ watch(
     :bordered="false"
     use12-hours
     format="HH:mm"
-    class="!w-full px-1"
+    class="!w-full !px-0 !border-none"
     :placeholder="isTimeInvalid ? 'Invalid time' : ''"
     :allow-clear="!readOnly"
     :input-read-only="true"

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

@@ -73,7 +73,13 @@ watch(
 
 <template>
   <div class="flex flex-row items-center justify-between">
-    <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm w-full" @blur="editEnabled = false" />
+    <input
+      v-if="editEnabled"
+      :ref="focus"
+      v-model="vModel"
+      class="outline-none text-sm w-full px-2"
+      @blur="editEnabled = false"
+    />
 
     <nuxt-link
       v-else-if="isValid && !cellUrlOptions?.overlay"

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

@@ -61,7 +61,7 @@ const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
     v-model:value="localState"
     picker="year"
     :bordered="false"
-    class="!w-full px-1"
+    class="!w-full !px-0 !border-none"
     :placeholder="placeholder"
     :allow-clear="!readOnly"
     :input-read-only="true"

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Draggable from 'vuedraggable'
-import { UITypes, isVirtualCol } from 'nocodb-sdk'
+import { isVirtualCol } from 'nocodb-sdk'
 import {
   ActiveViewInj,
   FieldsInj,
@@ -380,8 +380,7 @@ watch(
                                 <!--  Smartsheet (Virtual) Cell -->
                                 <div
                                   v-if="!isRowEmpty(record, col)"
-                                  class="flex flex-row w-full items-center justify-start"
-                                  :class="{ 'pt- pl-2': col.uidt !== UITypes.SingleSelect }"
+                                  class="flex flex-row w-full items-center justify-start pl-[6px]"
                                 >
                                   <LazySmartsheetVirtualCell
                                     v-if="isVirtualCol(col)"