From 1302c0a27b4367c592bf8afaa653700714418513 Mon Sep 17 00:00:00 2001
From: jearhe <0verme7753@gmail.com>
Date: Sun, 30 Aug 2026 00:47:34 +0800
Subject: [PATCH] fix(grid): unify transpose long-text editor style

---
 apps/desktop/src/components/grid/DataGrid.vue | 13 +++++++++++-
 .../DataGridTransposePresentation.spec.ts     | 21 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 8904499da8..8c64a20486 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -8329,6 +8329,15 @@ function transposeCellIsSelected(rowIndex: number, actualColIdx: number) {
   return visibleColIdx >= 0 && cellIsSelected(rowIndex, visibleColIdx);
 }
 
+// Transposed cells render at a compact row height (30px by default), while the
+// expanded editor (long text) grows well beyond that. Like the normal grid cell,
+// the transposed cell must stop clipping its content while the editor / readonly
+// text selection is active, otherwise the editor gets cropped below the row.
+function transposeCellEditorActive(recordIndex: number, valueIndex: number): boolean {
+  const rowId = displayItems.value[recordIndex]?.id;
+  return (editingCell.value?.rowId === rowId && editingCell.value.col === valueIndex) || readonlyTextCellMatches(rowId, valueIndex);
+}
+
 function onTransposeCellMouseenter(rowIndex: number, actualColIdx: number) {
   quickDownloadMenuCell.value = retainBinaryCellDownloadMenuForHover(quickDownloadMenuCell.value, { rowIndex, col: actualColIdx });
   if (isScrolling.value) return;
@@ -12487,10 +12496,12 @@ function openGridSnapshot() {
                     <div
                       v-for="cell in item.values"
                       :key="`${item.id}:${cell.recordIndex}`"
-                      class="relative flex shrink-0 items-center border-r border-border/70 px-2 py-0 truncate"
+                      class="relative flex shrink-0 items-center border-r border-border/70 px-2 py-0"
                       :class="[
                         transposeCellTextColorClass(cell.recordIndex, cell.valueIndex),
                         {
+                          'overflow-visible z-20 border-r-transparent': transposeCellEditorActive(cell.recordIndex, cell.valueIndex),
+                          'overflow-hidden text-ellipsis whitespace-nowrap': !transposeCellEditorActive(cell.recordIndex, cell.valueIndex),
                           'cell-selected': transposeCellIsSelected(cell.recordIndex, cell.valueIndex) && !displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
                           'cell-selected-dirty': transposeCellIsSelected(cell.recordIndex, cell.valueIndex) && displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
                           'cell-selected--sparse': transposeCellIsSelected(cell.recordIndex, cell.valueIndex) && !displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
diff --git a/apps/desktop/src/components/grid/__tests__/DataGridTransposePresentation.spec.ts b/apps/desktop/src/components/grid/__tests__/DataGridTransposePresentation.spec.ts
index 4ad8165742..8a8f362815 100644
--- a/apps/desktop/src/components/grid/__tests__/DataGridTransposePresentation.spec.ts
+++ b/apps/desktop/src/components/grid/__tests__/DataGridTransposePresentation.spec.ts
@@ -33,4 +33,25 @@ describe("DataGrid transpose presentation", () => {
     expect(dataGridSource).toContain("whitespace-pre-wrap break-words select-text");
     expect(dataGridSource).not.toContain("data-grid-transpose-field-popover");
   });
+
+  it("stops clipping the cell while the long-text editor or readonly text selection is active", () => {
+    // Transposed rows are compact (30px by default) while the expanded editor
+    // grows well beyond that; the cell must switch to overflow-visible while the
+    // editor / readonly text selection is active, mirroring the normal grid cell.
+    expect(dataGridSource).toContain("'overflow-visible z-20 border-r-transparent': transposeCellEditorActive(cell.recordIndex, cell.valueIndex)");
+    expect(dataGridSource).toContain("'overflow-hidden text-ellipsis whitespace-nowrap': !transposeCellEditorActive(cell.recordIndex, cell.valueIndex)");
+    expect(dataGridSource).toContain("function transposeCellEditorActive");
+    expect(dataGridSource).toContain("readonlyTextCellMatches(rowId, valueIndex)");
+    // The transposed cell no longer unconditionally truncates (overflow: hidden),
+    // which would crop the expanded editor below the compact row bounds.
+    expect(dataGridSource).not.toContain('class="relative flex shrink-0 items-center border-r border-border/70 px-2 py-0 truncate"');
+  });
+
+  it("shares the normal grid cell's editor overlay contract while editing", () => {
+    // Normal grid cells switch to the same overflow/z/border contract while the
+    // cell editor or readonly text selection is active, so long-text editing
+    // looks identical across both views.
+    expect(dataGridSource).toContain("'overflow-visible z-20 border-r-transparent': (editingCell?.rowId === item.id && editingCell?.col === col.actualColIdx) || readonlyTextCellMatches(item.id, col.actualColIdx),");
+    expect(dataGridSource).toContain("'overflow-hidden': !((editingCell?.rowId === item.id && editingCell?.col === col.actualColIdx) || readonlyTextCellMatches(item.id, col.actualColIdx)),");
+  });
 });