diff --git a/frontend/src/components/VideoCard.tsx b/frontend/src/components/VideoCard.tsx index 541c86e..4e55b35 100644 --- a/frontend/src/components/VideoCard.tsx +++ b/frontend/src/components/VideoCard.tsx @@ -1,4 +1,4 @@ -import { memo } from "react"; +import { memo, useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { Bookmark, @@ -264,12 +264,26 @@ function VideoCard({ )} ); + // Show the full title in a native tooltip only when it's clamped (overflows its 2 lines). + const titleRef = useRef(null); + const [titleClamped, setTitleClamped] = useState(false); + useEffect(() => { + const el = titleRef.current; + if (!el) return; + const check = () => setTitleClamped(el.scrollHeight > el.clientHeight + 1); + check(); + const ro = new ResizeObserver(check); + ro.observe(el); + return () => ro.disconnect(); + }, [video.title]); const title = ( openInApp(e, video, onOpen)} + title={titleClamped ? video.title ?? undefined : undefined} className="font-medium leading-snug line-clamp-2 hover:text-accent" > {video.title}