From 3fe33772ce49d6075912ef623e6c77ef6069059a Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sat, 2 May 2026 21:08:19 +0800
Subject: [PATCH] fix(web): editable cell wraps long values instead of
 overflowing

Long URLs in the link column would overflow on mobile because
truncate + inline-flex without min-w-0 expanded the cell beyond the
card width. Switch to flex+items-start, min-w-0 on the value span,
break-all so unbreakable strings wrap. Edit hint stays pinned right
with shrink-0.
---
 web/components/editable-cell.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/components/editable-cell.tsx b/web/components/editable-cell.tsx
index b804fc6..2eaa810 100644
--- a/web/components/editable-cell.tsx
+++ b/web/components/editable-cell.tsx
@@ -79,14 +79,14 @@ export default function EditableCell({
         type="button"
         onClick={begin}
         aria-label={label ? `Edit ${label}` : undefined}
-        className="group relative -mx-1 -my-0.5 inline-flex w-full items-center rounded-sm px-1 py-0.5 text-left font-mono text-sm text-zinc-900 hover:bg-yellow-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-yellow-400"
+        className="group relative -mx-1 -my-0.5 flex w-full min-w-0 items-start gap-2 rounded-sm px-1 py-0.5 text-left font-mono text-sm text-zinc-900 hover:bg-yellow-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-yellow-400"
       >
-        <span className="truncate">
+        <span className="min-w-0 flex-1 break-all">
           {value || <em className="not-italic text-zinc-400">—</em>}
         </span>
         <span
           aria-hidden="true"
-          className="ml-2 hidden text-[10px] font-semibold uppercase tracking-widest text-zinc-400 group-hover:inline"
+          className="hidden shrink-0 pt-0.5 text-[10px] font-semibold uppercase tracking-widest text-zinc-400 group-hover:inline"
         >
           edit
         </span>