fix(3000): Truncate page titles intelligently (#19366)

* Fix page title truncation * Show tooltip on hover if page title is truncated * Remove delay from the truncation tooltip
PostHog · Dec 15, 2023 · 41160e3 · 41160e3
1 parent e342b80
commit 41160e3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/frontend/src/layout/navigation-3000/components/TopBar.scss b/frontend/src/layout/navigation-3000/components/TopBar.scss
@@ -9,6 +9,11 @@
     height: var(--breadcrumbs-height-full);
     white-space: nowrap;
     pointer-events: none;
+
+    .EditableField__display {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 }
 
 .TopBar3000__content {
@@ -83,6 +88,7 @@
     }
 
     &.TopBar3000__breadcrumb--here {
+        flex-shrink: 1;
         cursor: default;
         visibility: var(--breadcrumbs-title-small-visibility);
 

diff --git a/frontend/src/lib/components/EditableField/EditableField.scss b/frontend/src/lib/components/EditableField/EditableField.scss
@@ -26,6 +26,10 @@
         padding: 0.25rem; // Some padding to give the focus outline more breathing space
         margin: -0.25rem;
         overflow: auto;
+    }
+
+    .EditableField__display {
+        overflow: hidden;
         white-space: pre-wrap;
     }
 

diff --git a/frontend/src/lib/components/EditableField/EditableField.tsx b/frontend/src/lib/components/EditableField/EditableField.tsx
@@ -2,6 +2,7 @@ import './EditableField.scss'
 
 import { useMergeRefs } from '@floating-ui/react'
 import clsx from 'clsx'
+import { useResizeObserver } from 'lib/hooks/useResizeObserver'
 import { IconEdit, IconMarkdown } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
@@ -68,7 +69,10 @@ export function EditableField({
 }: EditableFieldProps): JSX.Element {
     const [localIsEditing, setLocalIsEditing] = useState(mode === 'edit')
     const [localTentativeValue, setLocalTentativeValue] = useState(value)
-    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>()
+    const [isDisplayTooltipNeeded, setIsDisplayTooltipNeeded] = useState(false)
+    const containerRef = useRef<HTMLDivElement>(null)
+    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
+    const displayRef = useRef<HTMLSpanElement>(null)
     const previousIsEditing = useRef<boolean>()
 
     useEffect(() => {
@@ -92,6 +96,14 @@ export function EditableField({
         previousIsEditing.current = localIsEditing
     }, [localIsEditing])
 
+    useResizeObserver({
+        ref: containerRef,
+        onResize: () => {
+            if (displayRef.current) {
+                setIsDisplayTooltipNeeded(displayRef.current.scrollWidth > displayRef.current.clientWidth)
+            }
+        },
+    })
     const isSaveable = !minLength || localTentativeValue.length >= minLength
 
     const mouseDownOnCancelButton = (e: React.MouseEvent): void => {
@@ -141,6 +153,7 @@ export function EditableField({
             data-attr={dataAttr}
             // eslint-disable-next-line react/forbid-dom-props
             style={style}
+            ref={containerRef}
         >
             <Tooltip
                 placement="right"
@@ -227,7 +240,15 @@ export function EditableField({
                             {localTentativeValue && markdown ? (
                                 <LemonMarkdown lowKeyHeadings>{localTentativeValue}</LemonMarkdown>
                             ) : (
-                                localTentativeValue || <i>{placeholder}</i>
+                                <Tooltip
+                                    title={isDisplayTooltipNeeded ? localTentativeValue : undefined}
+                                    placement="bottomLeft"
+                                    delayMs={0}
+                                >
+                                    <span className="EditableField__display" ref={displayRef}>
+                                        {localTentativeValue || <i>{placeholder}</i>}
+                                    </span>
+                                </Tooltip>
                             )}
                             {(!mode || !!onModeToggle) && (
                                 <div className="EditableField__actions">