From 9771bb72c5885a828aafe6d7da8955c9b363c227 Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sun, 3 May 2026 08:17:23 +0800
Subject: [PATCH] fix(web): move mobile status back into card header next to
 username

Earlier change made the badge the editable trigger and demoted it
into the body's Status row. That separated status from the row
identifier on mobile, which read as 'where is this status from?'.

Move the EditableCell-with-StatusBadge back into the card header,
right after the username, and drop the body Status row entirely.
Mobile now matches desktop's information density: identifier +
status badge inline, edit via badge click.
---
 web/components/accounts-table.tsx | 32 ++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/web/components/accounts-table.tsx b/web/components/accounts-table.tsx
index 7278310..57bb8c2 100644
--- a/web/components/accounts-table.tsx
+++ b/web/components/accounts-table.tsx
@@ -237,10 +237,23 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
           const k = (f: string) => `${row.username}::${f}`;
           return (
             <div key={row.username} className="rounded-2xl bg-white p-5 ring-1 ring-zinc-200/60">
-              <div className="flex items-center justify-between gap-2">
-                <span className="font-mono text-base font-semibold text-zinc-900">
-                  {row.username}
-                </span>
+              <div className="flex items-center justify-between gap-3">
+                <div className="flex min-w-0 items-center gap-3">
+                  <span className="shrink-0 font-mono text-base font-semibold text-zinc-900">
+                    {row.username}
+                  </span>
+                  <div className="min-w-0 flex-1">
+                    <EditableCell
+                      value={row.status}
+                      label={`status for ${row.username}`}
+                      isCurrentlyEditing={editingKey === k("status")}
+                      onEditStart={() => setEditingKey(k("status"))}
+                      onEditEnd={() => setEditingKey(null)}
+                      onSave={(v) => saveCell(row.username, "status", v)}
+                      renderView={(v) => <StatusBadge status={v} />}
+                    />
+                  </div>
+                </div>
                 <DeleteButton
                   label={row.username}
                   onClick={() => {
@@ -260,17 +273,6 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
                     onSave={(v) => saveCell(row.username, "password", v)}
                   />
                 </CardRow>
-                <CardRow label="Status">
-                  <EditableCell
-                    value={row.status}
-                    label={`status for ${row.username}`}
-                    isCurrentlyEditing={editingKey === k("status")}
-                    onEditStart={() => setEditingKey(k("status"))}
-                    onEditEnd={() => setEditingKey(null)}
-                    onSave={(v) => saveCell(row.username, "status", v)}
-                    renderView={(v) => <StatusBadge status={v} />}
-                  />
-                </CardRow>
                 <CardRow label="Link">
                   <EditableCell
                     value={row.link}