From fa86b530d608710f97d38901da984a3fc2888c86 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Mon, 1 Jun 2026 15:22:24 +0800
Subject: [PATCH] fix(grid): center transpose cell text

---
 apps/desktop/src/components/grid/DataGrid.vue           | 7 ++++---
 apps/desktop/src/components/grid/TemporalCellEditor.vue | 7 ++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index c5e41b856e..124a03590d 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -5130,7 +5130,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                     :style="{ height: '30px', width: `${transposeTotalWidth}px` }"
                   >
                     <div
-                      class="sticky left-0 z-10 shrink-0 border-r border-border bg-background px-3 py-1.5 font-medium truncate"
+                      class="sticky left-0 z-10 flex shrink-0 items-center border-r border-border bg-background px-3 py-0 font-medium truncate"
                       :style="{ width: `${transposePinnedWidth}px` }"
                       :title="item.column"
                     >
@@ -5140,7 +5140,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                     <div
                       v-for="cell in item.values"
                       :key="`${item.id}:${cell.recordIndex}`"
-                      class="relative shrink-0 border-r border-border/70 px-2 py-1.5 font-mono truncate"
+                      class="relative flex shrink-0 items-center border-r border-border/70 px-2 py-0 font-mono truncate"
                       :class="{
                         'text-muted-foreground italic': cell.isNull,
                         'cell-selected':
@@ -5192,6 +5192,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                           v-if="temporalEditorKindForColumn(cell.valueIndex)"
                           v-model="editValue"
                           :kind="temporalEditorKindForColumn(cell.valueIndex)!"
+                          cell-layout="transpose"
                           @cancel="cancelEdit"
                           @commit="commitGridEdit"
                         />
@@ -5201,7 +5202,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                           autocapitalize="off"
                           autocorrect="off"
                           spellcheck="false"
-                          class="cell-edit-input absolute inset-0 bg-background border-2 border-primary px-2 py-0 text-xs leading-[26px] outline-none z-10"
+                          class="cell-edit-input absolute inset-0 bg-background border-2 border-primary px-1.5 py-0 text-xs leading-[26px] outline-none z-10"
                           @blur="commitEdit"
                           @click.stop
                           @keydown.stop="onEditKeydown"
diff --git a/apps/desktop/src/components/grid/TemporalCellEditor.vue b/apps/desktop/src/components/grid/TemporalCellEditor.vue
index bc208f5a07..15945e5fd4 100644
--- a/apps/desktop/src/components/grid/TemporalCellEditor.vue
+++ b/apps/desktop/src/components/grid/TemporalCellEditor.vue
@@ -11,10 +11,12 @@ const props = withDefaults(
     kind: TemporalCellEditorKind;
     modelValue: string;
     variant?: "cell" | "inline";
+    cellLayout?: "grid" | "transpose";
     commitOnClose?: boolean;
   }>(),
   {
     variant: "cell",
+    cellLayout: "grid",
     commitOnClose: true,
   },
 );
@@ -35,7 +37,10 @@ const displayValue = computed(() => props.modelValue || "NULL");
 const triggerClass = computed(() =>
   props.variant === "inline"
     ? "cell-edit-input flex h-9 w-full items-center gap-2 rounded border bg-background px-2 text-left text-xs outline-none hover:border-primary/60 focus:border-primary"
-    : "cell-edit-input absolute inset-0 z-10 flex items-center gap-1 border-2 border-primary bg-background px-2.5 py-0 text-left text-xs outline-none",
+    : [
+        "cell-edit-input absolute inset-0 z-10 flex items-center gap-1 border-2 border-primary bg-background py-0 text-left text-xs outline-none",
+        props.cellLayout === "transpose" ? "px-1.5" : "px-2.5",
+      ],
 );
 const dateParts = computed(() => {
   const text = formatTemporalInputValue(props.modelValue, "date");