diff --git a/src/components/draggable-table-tags.tsx b/src/components/draggable-table-tags.tsx index b0412fd..99ae47b 100644 --- a/src/components/draggable-table-tags.tsx +++ b/src/components/draggable-table-tags.tsx @@ -106,15 +106,25 @@ export const DraggagleTableData: React.FC const visibleTop = stickyHeaders ? Math.max(top, stickyHeaderHeight) : top; const visibleBottom = Math.min(window.innerHeight, bottom); const availableHeight = Math.abs(visibleBottom - visibleTop); + const cellTextDiv = cellRef.current.querySelector("div"); + const cellTextValueHeight = cellTextDiv?.getBoundingClientRect().height || kCellHeight; let newTop; - if (top >= visibleTop && bottom <= visibleBottom) { // the whole cell is visible + if (top >= visibleTop && bottom <= visibleBottom) { + // the whole cell is visible return 0; } else if (top < visibleTop && bottom < window.innerHeight) { // we can see the bottom border of the cell but not the top const hiddenHeightOfCell = height - availableHeight; - newTop = Math.max(0, (hiddenHeightOfCell - kCellHeight + (availableHeight / 2))); + //This should keep wrapped text above the bottom border + const cellTextHeightToUse = (hiddenHeightOfCell > cellTextValueHeight) + ? Math.max(cellTextValueHeight, kCellHeight) + : kCellHeight; + //if the text div height is bigger than the available height, leave it centered + newTop = availableHeight < cellTextHeightToUse + ? 0 + : Math.max(0, (hiddenHeightOfCell - cellTextHeightToUse + (availableHeight / 2))); } else if (top >= visibleTop && bottom > visibleBottom) { // we can see the top border of the cell but not the bottom newTop = Math.max(0, ((availableHeight) / 2));