Moduletrace/cobble
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases 28 Wiki Activity

Truncate long list row titles instead of overflowing on mobile

Browse Source 
Stack lines its children up at the start, so a linked row title grew to
its full one-line width and pushed the card past the screen edge. The
link now fills the row and the title is a block, so it truncates.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
tben
2026-10-28 07:05:34 +01:00
co-authored by Claude Opus 5.5
parent 596a417229
commit b4b27dea10
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/admin/settings/(partials)/settings-list-row.tsx
+2 -2
View File
@@ -32,7 +32,7 @@ type Props = {
*/ */
export default function SettingsListRow({ avatar, title, href, badge, title_icon, subtitle, children }: Props) { export default function SettingsListRow({ avatar, title, href, badge, title_icon, subtitle, children }: Props) {
const title_content = ( const title_content = (
<Span className="text-sm font-bold leading-5 text-ink truncate w-full"> <Span className="block text-sm font-bold leading-5 text-ink truncate w-full">
{title} {title}
{title_icon ? <Span className="ml-1.5 inline-flex align-middle">{title_icon}</Span> : null} {title_icon ? <Span className="ml-1.5 inline-flex align-middle">{title_icon}</Span> : null}
{badge ? <Span className="ml-2 text-[11px] font-bold leading-4 text-ink-secondary">{badge}</Span> : null} {badge ? <Span className="ml-2 text-[11px] font-bold leading-4 text-ink-secondary">{badge}</Span> : null}
@@ -47,7 +47,7 @@ export default function SettingsListRow({ avatar, title, href, badge, title_icon
<Link <Link
href={href} href={href}
title={title} title={title}
className="block min-w-0 border-0 leading-normal hover:opacity-100 hover:underline focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-surface rounded-default-sm" className="block w-full min-w-0 border-0 leading-normal hover:opacity-100 hover:underline focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-surface rounded-default-sm"
> >
{title_content} {title_content}
</Link> </Link>