feat(ui): show a tooltip with the full text on truncated titles

Add an `overflowTooltip` Svelte action that sets a native `title` only when
an element is actually clipped (ellipsis or line-clamp), re-checking on
resize. Native title is keyboard/touch reachable and zero-dep, unlike a
hover-only popover. Applied to the clipped titles on MangaCard, BookmarkList,
HistoryList, and the Continue-reading shelf.

Unit tests cover the overflow decision and the set/clear/update behaviour;
an e2e verifies a real-browser truncated card title gets the tooltip while a
short one does not.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/BookmarkList.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { fileUrl } from '$lib/api/client';
     import type { Bookmark } from '$lib/api/bookmarks';
+    import { overflowTooltip } from '$lib/actions/overflowTooltip';
     import BookImage from '@lucide/svelte/icons/book-image';
 
     let {
@@ -34,6 +35,7 @@
                     href="/manga/{b.manga_id}"
                     class="title"
                     data-testid="bookmark-title"
+                    use:overflowTooltip={b.manga_title ?? 'Unknown manga'}
                 >
                     {b.manga_title ?? 'Unknown manga'}
                 </a>

frontend/src/lib/components/ContinueReadingShelf.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { fileUrl } from '$lib/api/client';
     import { chapterLabel } from '$lib/api/chapters';
+    import { overflowTooltip } from '$lib/actions/overflowTooltip';
     import type { ReadProgressSummary } from '$lib/api/read_progress';
     import BookImage from '@lucide/svelte/icons/book-image';
 
@@ -66,7 +67,7 @@
                             </span>
                         {/if}
                     </span>
-                    <span class="title" data-testid="continue-title-{p.manga_id}">{p.manga_title}</span>
+                    <span class="title" data-testid="continue-title-{p.manga_id}" use:overflowTooltip={p.manga_title}>{p.manga_title}</span>
                     <span class="target">{targetLabel(p)}</span>
                 </a>
             </li>

frontend/src/lib/components/HistoryList.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { fileUrl } from '$lib/api/client';
     import { chapterLabel } from '$lib/api/chapters';
+    import { overflowTooltip } from '$lib/actions/overflowTooltip';
     import type { ReadProgressSummary } from '$lib/api/read_progress';
     import IconButton from '$lib/components/IconButton.svelte';
     import BookImage from '@lucide/svelte/icons/book-image';
@@ -96,7 +97,12 @@
                     {/if}
                 </a>
                 <div class="meta">
-                    <a href="/manga/{p.manga_id}" class="title" data-testid="{testid}-title">
+                    <a
+                        href="/manga/{p.manga_id}"
+                        class="title"
+                        data-testid="{testid}-title"
+                        use:overflowTooltip={p.manga_title}
+                    >
                         {p.manga_title}
                     </a>
                     <span class="target">

frontend/src/lib/components/MangaCard.svelte

@@ -2,6 +2,7 @@
     import { fileUrl } from '$lib/api/client';
     import type { Manga } from '$lib/api/client';
     import type { AuthorRef, GenreRef } from '$lib/api/mangas';
+    import { overflowTooltip } from '$lib/actions/overflowTooltip';
     import BookImage from '@lucide/svelte/icons/book-image';
 
     let {
@@ -77,7 +78,7 @@
         {/if}
     </a>
     <div class="meta">
-        <a href="/manga/{manga.id}" class="title">{manga.title}</a>
+        <a href="/manga/{manga.id}" class="title" use:overflowTooltip={manga.title}>{manga.title}</a>
         {#if authors.length > 0}
             <span class="author">{authors.map((a) => a.name).join(', ')}</span>
         {/if}