diff --git a/packages/sw/src/components/sw-footer/SWFooterParts.tsx b/packages/sw/src/components/sw-footer/SWFooterParts.tsx index e40deff..9d35b60 100644 --- a/packages/sw/src/components/sw-footer/SWFooterParts.tsx +++ b/packages/sw/src/components/sw-footer/SWFooterParts.tsx @@ -105,15 +105,24 @@ export interface SWFooterToolButtonProps extends Omit(function SWFooterToolButton( - { label, icon, activeIcon, pressed, className, type = "button", ...rest }, ref, + { label, icon, activeIcon, pressed, className, type = "button", title, onPointerEnter, onFocus, ...rest }, ref, ) { + const labelRef = useRef(null) + const [cut, setCut] = useState(false) + // Measured when the tooltip could show (not on every render): the label can only be cut by its own text and font. + const measure = () => { const node = labelRef.current; setCut(!!node && node.scrollWidth > node.clientWidth) } return (
diff --git a/packages/sw/src/theme/sw-footer.css b/packages/sw/src/theme/sw-footer.css index 9e63565..bf4c3c4 100644 --- a/packages/sw/src/theme/sw-footer.css +++ b/packages/sw/src/theme/sw-footer.css @@ -278,7 +278,9 @@ overflow: hidden; line-height: 16px; text-align: center; - text-overflow: clip; + /* A command longer than the slot (POLYGON, WIPEOUT …) ends in … inside the same 64px; the full name stays the + accessible name and shows as the tooltip (SWFooterToolButton). Slot, font and centering are unchanged. */ + text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--hm-sw-header-text-outline); }