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>

backend/Cargo.lock

@@ -1558,7 +1558,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
 
 [[package]]
 name = "mangalord"
-version = "0.98.0"
+version = "0.99.0"
 dependencies = [
  "anyhow",
  "argon2",

backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mangalord"
-version = "0.98.0"
+version = "0.99.0"
 edition = "2021"
 default-run = "mangalord"
 

frontend/e2e/overflow-tooltip.spec.ts

@@ -0,0 +1,66 @@
+import { test, expect, type Page } from './fixtures';
+
+// The overflowTooltip action sets a native `title` on a manga card's title
+// only when it's actually truncated. Verified in a real browser (jsdom can't
+// lay out, so scrollWidth/clientWidth are meaningless there).
+
+const LONG_TITLE =
+    'An Extraordinarily Long Manga Title That Cannot Possibly Fit Within Two Clamped Lines Of A Narrow Card';
+const SHORT_TITLE = 'Bleach';
+
+function manga(id: string, title: string) {
+    return {
+        id,
+        title,
+        status: 'ongoing',
+        alt_titles: [],
+        description: null,
+        cover_image_path: null,
+        created_at: '2026-01-01T00:00:00Z',
+        updated_at: '2026-01-01T00:00:00Z',
+        authors: [],
+        genres: []
+    };
+}
+
+async function mockHome(page: Page) {
+    await page.route('**/api/v1/auth/config', (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ self_register_enabled: true, private_mode: false }) })
+    );
+    await page.route('**/api/v1/auth/me', (r) =>
+        r.fulfill({ status: 401, contentType: 'application/json', body: JSON.stringify({ error: { code: 'unauthenticated', message: 'no' } }) })
+    );
+    await page.route('**/api/v1/auth/me/preferences', (r) =>
+        r.fulfill({ status: 401, contentType: 'application/json', body: '{}' })
+    );
+    await page.route('**/api/v1/genres*', (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: '[]' })
+    );
+    await page.route('**/api/v1/me/read-progress*', (r) =>
+        r.fulfill({ status: 401, contentType: 'application/json', body: JSON.stringify({ error: { code: 'unauthenticated', message: 'no' } }) })
+    );
+    await page.route('**/api/v1/mangas*', (r) =>
+        r.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                items: [manga('m1', LONG_TITLE), manga('m2', SHORT_TITLE)],
+                page: { limit: 50, offset: 0, total: 2 }
+            })
+        })
+    );
+}
+
+test('adds a title tooltip to truncated card titles but not to ones that fit', async ({ page }) => {
+    await mockHome(page);
+    // Narrow (mobile) grid so the long title clamps and overflows.
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto('/');
+
+    const longLink = page.getByRole('link', { name: LONG_TITLE });
+    await expect(longLink).toBeVisible();
+    await expect(longLink).toHaveAttribute('title', LONG_TITLE);
+
+    const shortLink = page.getByRole('link', { name: SHORT_TITLE });
+    await expect(shortLink).not.toHaveAttribute('title');
+});

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.98.0",
+  "version": "0.99.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mangalord-frontend",
-      "version": "0.98.0",
+      "version": "0.99.0",
       "devDependencies": {
         "@lucide/svelte": "^1.16.0",
         "@playwright/test": "^1.48.0",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.98.0",
+  "version": "0.99.0",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/lib/actions/overflowTooltip.test.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { isOverflowing, overflowTooltip } from './overflowTooltip';
+
+// jsdom doesn't lay out, so scrollWidth/clientWidth are always 0. Stub them
+// to model a clipped vs fitting element.
+function makeEl(dims: {
+    scrollWidth?: number;
+    clientWidth?: number;
+    scrollHeight?: number;
+    clientHeight?: number;
+}): HTMLElement {
+    const el = document.createElement('span');
+    for (const [k, v] of Object.entries(dims)) {
+        Object.defineProperty(el, k, { configurable: true, value: v });
+    }
+    document.body.appendChild(el);
+    return el;
+}
+
+afterEach(() => {
+    document.body.innerHTML = '';
+});
+
+describe('isOverflowing', () => {
+    it('is true when content is clipped horizontally', () => {
+        expect(isOverflowing(makeEl({ scrollWidth: 200, clientWidth: 100 }))).toBe(true);
+    });
+
+    it('is true when content is clipped vertically (line-clamp)', () => {
+        expect(
+            isOverflowing(makeEl({ scrollWidth: 100, clientWidth: 100, scrollHeight: 80, clientHeight: 40 }))
+        ).toBe(true);
+    });
+
+    it('is false when the content fits', () => {
+        expect(isOverflowing(makeEl({ scrollWidth: 100, clientWidth: 100 }))).toBe(false);
+    });
+});
+
+describe('overflowTooltip action', () => {
+    it('sets a title with the text when the element is truncated', () => {
+        const el = makeEl({ scrollWidth: 200, clientWidth: 100 });
+        overflowTooltip(el, 'A very long manga title');
+        expect(el.getAttribute('title')).toBe('A very long manga title');
+    });
+
+    it('does not set a title when the text fits', () => {
+        const el = makeEl({ scrollWidth: 100, clientWidth: 100 });
+        overflowTooltip(el, 'Short');
+        expect(el.getAttribute('title')).toBeNull();
+    });
+
+    it('updates the title text when the bound value changes', () => {
+        const el = makeEl({ scrollWidth: 200, clientWidth: 100 });
+        const action = overflowTooltip(el, 'First');
+        expect(el.getAttribute('title')).toBe('First');
+        action.update('Second');
+        expect(el.getAttribute('title')).toBe('Second');
+    });
+});

frontend/src/lib/actions/overflowTooltip.ts

@@ -0,0 +1,45 @@
+// Svelte action: show the full text in a native `title` tooltip only when
+// the element is actually truncated (ellipsis or line-clamp), and keep it in
+// sync as the element resizes or the text changes.
+//
+// Native `title` is deliberate: it's keyboard/touch reachable and zero-dep,
+// unlike a hover-only custom popover. Applied to clipped titles across list
+// surfaces (MangaCard, BookmarkList, HistoryList).
+
+/** True when the element's content is clipped horizontally (ellipsis) or
+ *  vertically (line-clamp). A 1px slack absorbs sub-pixel rounding. */
+export function isOverflowing(node: HTMLElement): boolean {
+    return (
+        node.scrollWidth - node.clientWidth > 1 ||
+        node.scrollHeight - node.clientHeight > 1
+    );
+}
+
+export function overflowTooltip(node: HTMLElement, text: string) {
+    let current = text;
+
+    function sync() {
+        if (isOverflowing(node)) node.setAttribute('title', current);
+        else node.removeAttribute('title');
+    }
+
+    // Re-check on size changes (viewport resize, font load, layout shifts).
+    // Guarded for environments without ResizeObserver (SSR / jsdom).
+    let ro: ResizeObserver | undefined;
+    if (typeof ResizeObserver !== 'undefined') {
+        ro = new ResizeObserver(() => sync());
+        ro.observe(node);
+    }
+
+    sync();
+
+    return {
+        update(next: string) {
+            current = next;
+            sync();
+        },
+        destroy() {
+            ro?.disconnect();
+        }
+    };
+}

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}