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

feat(web): loosen user-row layout — more breathing room

Browse Source 
- 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>
This commit is contained in:
yiekheng 2026-05-10 21:00:08 +08:00
parent adaf087a5f
commit 3af0dc7ca7
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/settings/users/page.tsx
View File

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

14
apps/web/src/app/settings/users/user-row-client.tsx
View File

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