From 3af0dc7ca76661e6404f67caa043376225ffdc5d Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sun, 10 May 2026 21:00:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20loosen=20user-row=20layout=20?=
 =?UTF-8?q?=E2=80=94=20more=20breathing=20room?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Card row: gap-2 -> gap-3, p-3 -> p-4
- Row inner gap: gap-2 -> gap-3 (between identity block and buttons)
- Identity block: add space-y-1.5 + leading-none on username so the
  badge row has visible separation from the username
- Badge / 'you' chip gap: 1.5 -> 2
- Button group gap: 1 -> 1.5
- CardContent space between rows: space-y-3 -> space-y-4

Pure layout — no behaviour change.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/src/app/settings/users/page.tsx           |  2 +-
 .../web/src/app/settings/users/user-row-client.tsx | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app/settings/users/page.tsx b/apps/web/src/app/settings/users/page.tsx
index da85bf4..755a752 100644
--- a/apps/web/src/app/settings/users/page.tsx
+++ b/apps/web/src/app/settings/users/page.tsx
@@ -42,7 +42,7 @@ export default async function UsersPage() {
             demoted or deleted.
           </CardDescription>
         </CardHeader>
-        <CardContent className="space-y-3">
+        <CardContent className="space-y-4">
           {rows.map((u) => (
             <UserRowClient
               key={u.id}
diff --git a/apps/web/src/app/settings/users/user-row-client.tsx b/apps/web/src/app/settings/users/user-row-client.tsx
index e8682de..317ea2b 100644
--- a/apps/web/src/app/settings/users/user-row-client.tsx
+++ b/apps/web/src/app/settings/users/user-row-client.tsx
@@ -58,11 +58,13 @@ export function UserRowClient({ user, isSelf, isLastAdmin }: UserRowClientProps)
   const deleteDisabled = pending || isSelf || isLastAdmin;
 
   return (
-    <div className="flex flex-col gap-2 rounded-lg border p-3">
-      <div className="flex items-center justify-between gap-2">
-        <div className="min-w-0">
-          <p className="text-sm font-medium truncate">{user.username}</p>
-          <div className="flex items-center gap-1.5">
+    <div className="flex flex-col gap-3 rounded-lg border p-4">
+      <div className="flex items-center justify-between gap-3">
+        <div className="min-w-0 space-y-1.5">
+          <p className="text-sm font-medium leading-none truncate">
+            {user.username}
+          </p>
+          <div className="flex items-center gap-2">
             <Badge
               variant="secondary"
               className={
@@ -78,7 +80,7 @@ export function UserRowClient({ user, isSelf, isLastAdmin }: UserRowClientProps)
             )}
           </div>
         </div>
-        <div className="flex flex-wrap justify-end gap-1">
+        <div className="flex flex-wrap justify-end gap-1.5">
           <Button
             type="button"
             size="sm"