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>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user