From b4b27dea1028f6fa3273a8aeacfef0af5fb10a81 Mon Sep 17 00:00:00 2001
From: Benjamin Toby <devops@tben.me>
Date: Wed, 28 Oct 2026 07:05:34 +0100
Subject: [PATCH] Truncate long list row titles instead of overflowing on
 mobile

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 <noreply@anthropic.com>
---
 src/pages/admin/settings/(partials)/settings-list-row.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/admin/settings/(partials)/settings-list-row.tsx b/src/pages/admin/settings/(partials)/settings-list-row.tsx
index 3006934..c25ea26 100644
--- a/src/pages/admin/settings/(partials)/settings-list-row.tsx
+++ b/src/pages/admin/settings/(partials)/settings-list-row.tsx
@@ -32,7 +32,7 @@ type Props = {
  */
 export default function SettingsListRow({ avatar, title, href, badge, title_icon, subtitle, children }: Props) {
     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_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}
@@ -47,7 +47,7 @@ export default function SettingsListRow({ avatar, title, href, badge, title_icon
                     <Link
                         href={href}
                         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}
                     </Link>