Add full name tooltip when it is ellipsized

Issue #241

src/components/tables/common.tsx

@@ -31,11 +31,11 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { ContextMenu, useContextMenu } from "components/contextmenu";
 import type { TableName } from "config";
 import { ConfigContext } from "config";
-import React, { memo, useReducer, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { memo, useReducer, useCallback, useContext, useEffect, useMemo, useRef, useState, useLayoutEffect } from "react";
 import type { DropResult } from "react-beautiful-dnd";
 import { DragDropContext, Draggable } from "react-beautiful-dnd";
 import { StrictModeDroppable } from "components/strictmodedroppable";
-import { eventHasModKey, reorderElements } from "trutil";
+import { eventHasModKey, hasEllipsis, reorderElements } from "trutil";
 import { useFontSize } from "themehooks";
 
 const defaultColumn = {
@@ -628,6 +628,14 @@ export function EditableNameField(props: EditableNameFieldProps) {
     }, [props.currentName]);
 
     const ref = useRef<HTMLDivElement>(null);
+    const innerRef = useRef<HTMLDivElement>(null);
+    const [showNameTooltip, setShowNameTooltip] = useState(false);
+
+    useLayoutEffect(() => {
+        if (innerRef.current != null) {
+            setShowNameTooltip(hasEllipsis(innerRef.current));
+        }
+    }, [isHover, isRenaming]);
 
     const onTextKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.key === "Enter") {
@@ -691,7 +699,9 @@ export function EditableNameField(props: EditableNameFieldProps) {
                     onClick={(e) => { e.stopPropagation(); }}
                     onDoubleClick={(e) => { e.stopPropagation(); }}
                     autoCorrect="off" autoCapitalize="off" spellCheck="false" />
-                : <Box pl="xs" sx={{ flexGrow: 1, textOverflow: "ellipsis", overflow: "hidden" }}>
+                : <Box ref={innerRef}
+                    pl="xs" sx={{ flexGrow: 1, textOverflow: "ellipsis", overflow: "hidden" }}
+                    title={showNameTooltip ? props.currentName : undefined}>
                     {props.currentName}
                 </Box>}
             {isHover && !isRenaming && props.onUpdate !== undefined

src/trutil.ts

@@ -262,3 +262,19 @@ export function torrentProgressbarStyle(torrent: Torrent, config: Config) {
 
     return { animate, variant };
 }
+
+export function hasEllipsis(element: HTMLElement) {
+    if (element == null) return false;
+
+    let scrollWidth = element.scrollWidth;
+
+    element.style.width = "max-content";
+    const itemRects = element.getClientRects();
+
+    if (itemRects.length > 0 && itemRects[0].width > scrollWidth) {
+        scrollWidth = itemRects[0].width;
+    }
+
+    element.style.width = "auto";
+    return scrollWidth > element.clientWidth;
+}