diff --git a/packages/nc-gui/components/cell/Date/Readonly.vue b/packages/nc-gui/components/cell/Date/Readonly.vue
index 66a671bb51..927405eef8 100644
--- a/packages/nc-gui/components/cell/Date/Readonly.vue
+++ b/packages/nc-gui/components/cell/Date/Readonly.vue
@@ -25,9 +25,9 @@ const localState = computed(() => {
 </script>
 
 <template>
-  <span class="nc-cell-field">
+  <div class="nc-cell-field tracking-tight truncate">
     {{ localState?.format(dateFormat) ?? '' }}
-  </span>
+  </div>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/packages/nc-gui/components/cell/DateTime/Editor.vue b/packages/nc-gui/components/cell/DateTime/Editor.vue
index 96510a3a27..fcbf1cec1e 100644
--- a/packages/nc-gui/components/cell/DateTime/Editor.vue
+++ b/packages/nc-gui/components/cell/DateTime/Editor.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
 import { dateFormats, isSystemColumn, timeFormats } from 'nocodb-sdk'
+import { timeCellMaxWidthMap } from './utils'
 
 interface Props {
   modelValue?: string | null
@@ -436,20 +437,7 @@ function handleSelectTime(value: dayjs.Dayjs) {
 }
 
 const timeCellMaxWidth = computed(() => {
-  return {
-    [timeFormats[0]]: {
-      12: 'max-w-[85px]',
-      24: 'max-w-[65px]',
-    },
-    [timeFormats[1]]: {
-      12: 'max-w-[100px]',
-      24: 'max-w-[80px]',
-    },
-    [timeFormats[2]]: {
-      12: 'max-w-[130px]',
-      24: 'max-w-[110px]',
-    },
-  }[timeFormat.value][parseProp(column.value.meta).is12hrFormat ? 12 : 24]
+  return timeCellMaxWidthMap?.[timeFormat.value]?.[parseProp(column.value.meta).is12hrFormat ? 12 : 24]
 })
 
 const cellValue = computed(
@@ -585,8 +573,6 @@ const currentDate = ($event) => {
       @click.stop="handleSelectDate()"
     />
   </div>
-
-  <div v-if="!editable && isGrid" class="absolute inset-0 z-90 cursor-pointer"></div>
 </template>
 
 <style scoped>
diff --git a/packages/nc-gui/components/cell/DateTime/Readonly.vue b/packages/nc-gui/components/cell/DateTime/Readonly.vue
index 8463bfd165..74560bd16a 100644
--- a/packages/nc-gui/components/cell/DateTime/Readonly.vue
+++ b/packages/nc-gui/components/cell/DateTime/Readonly.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { dateFormats, timeFormats } from 'nocodb-sdk'
 import dayjs from 'dayjs'
+import { timeCellMaxWidthMap } from './utils'
 
 interface Props {
   modelValue?: string | null
@@ -47,20 +48,7 @@ const cellValue = computed(
 )
 
 const timeCellMaxWidth = computed(() => {
-  return {
-    [timeFormats[0]]: {
-      12: 'max-w-[85px]',
-      24: 'max-w-[65px]',
-    },
-    [timeFormats[1]]: {
-      12: 'max-w-[100px]',
-      24: 'max-w-[80px]',
-    },
-    [timeFormats[2]]: {
-      12: 'max-w-[130px]',
-      24: 'max-w-[110px]',
-    },
-  }[timeFormat.value][parseProp(column.value.meta).is12hrFormat ? 12 : 24]
+  return timeCellMaxWidthMap?.[timeFormat.value]?.[parseProp(column.value.meta).is12hrFormat ? 12 : 24]
 })
 </script>
 
@@ -75,10 +63,3 @@ const timeCellMaxWidth = computed(() => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.nc-cell-picker-datetime {
-  @apply text-[13px] leading-4;
-  font-weight: 500;
-}
-</style>
diff --git a/packages/nc-gui/components/cell/DateTime/utils.ts b/packages/nc-gui/components/cell/DateTime/utils.ts
new file mode 100644
index 0000000000..7acd07d81e
--- /dev/null
+++ b/packages/nc-gui/components/cell/DateTime/utils.ts
@@ -0,0 +1,16 @@
+import { timeFormats } from 'nocodb-sdk'
+
+export const timeCellMaxWidthMap = {
+  [timeFormats[0]]: {
+    12: 'max-w-[85px]',
+    24: 'max-w-[65px]',
+  },
+  [timeFormats[1]]: {
+    12: 'max-w-[100px]',
+    24: 'max-w-[80px]',
+  },
+  [timeFormats[2]]: {
+    12: 'max-w-[130px]',
+    24: 'max-w-[110px]',
+  },
+}
diff --git a/packages/nc-gui/components/cell/Year/Editor.vue b/packages/nc-gui/components/cell/Year/Editor.vue
index 94bccdb5c0..fe91a284c0 100644
--- a/packages/nc-gui/components/cell/Year/Editor.vue
+++ b/packages/nc-gui/components/cell/Year/Editor.vue
@@ -317,7 +317,6 @@ function handleSelectDate(value?: dayjs.Dayjs) {
       </div>
     </template>
   </NcDropdown>
-  <div v-if="!editable && isGrid" class="absolute inset-0 z-90 cursor-pointer"></div>
 </template>
 
 <style scoped>
diff --git a/packages/nc-gui/components/cell/Year/Readonly.vue b/packages/nc-gui/components/cell/Year/Readonly.vue
index 8752b3d4b5..3fff0cd5d0 100644
--- a/packages/nc-gui/components/cell/Year/Readonly.vue
+++ b/packages/nc-gui/components/cell/Year/Readonly.vue
@@ -22,9 +22,9 @@ const localState = computed(() => {
 </script>
 
 <template>
-  <span>
+  <div class="nc-cell-field tracking-tight truncate">
     {{ localState?.format('YYYY') ?? '' }}
-  </span>
+  </div>
 </template>
 
 <style scoped lang="scss"></style>