Mostly (but not perfect) fixes the bug of wrapped text overflowing in…

…to next cell

src/components/draggable-table-tags.tsx

@@ -106,15 +106,25 @@ export const DraggagleTableData: React.FC<DraggagleTableDataProps>
       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));