yiekheng/cm_bot_v2
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): editable cell wraps long values instead of overflowing

Browse Source 
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.
This commit is contained in:
yiekheng 2026-05-02 21:08:19 +08:00
parent b497e133bd
commit 3fe33772ce
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/editable-cell.tsx
View File

@ -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>