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() {
{ 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)),"); + }); });