From cd9987c00f954643d6477eb7b9be0691522faa7d Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Tue, 30 Jun 2026 23:53:44 +0200
Subject: [PATCH] feat(card): tooltip the full video title only when it's
 clamped

The card title is line-clamped to 2 lines; measure overflow (ResizeObserver, re-checks on
responsive resize) and set the native title attribute with the full text only when it's actually
truncated, so hovering reveals the rest without a redundant tooltip on short titles.
---
 frontend/src/components/VideoCard.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

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<HTMLAnchorElement>(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 = (
     <a
+      ref={titleRef}
       href={video.watch_url}
       target="_blank"
       rel="noreferrer"
       onClick={(e) => openInApp(e, video, onOpen)}
+      title={titleClamped ? video.title ?? undefined : undefined}
       className="font-medium leading-snug line-clamp-2 hover:text-accent"
     >
       {video.title}