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

- 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

View File

@ -42,7 +42,7 @@ export default async function UsersPage() {
demoted or deleted. demoted or deleted.
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-4">
{rows.map((u) => ( {rows.map((u) => (
<UserRowClient <UserRowClient
key={u.id} key={u.id}

View File

@ -58,11 +58,13 @@ export function UserRowClient({ user, isSelf, isLastAdmin }: UserRowClientProps)
const deleteDisabled = pending || isSelf || isLastAdmin; const deleteDisabled = pending || isSelf || isLastAdmin;
return ( return (
<div className="flex flex-col gap-2 rounded-lg border p-3"> <div className="flex flex-col gap-3 rounded-lg border p-4">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-3">
<div className="min-w-0"> <div className="min-w-0 space-y-1.5">
<p className="text-sm font-medium truncate">{user.username}</p> <p className="text-sm font-medium leading-none truncate">
<div className="flex items-center gap-1.5"> {user.username}
</p>
<div className="flex items-center gap-2">
<Badge <Badge
variant="secondary" variant="secondary"
className={ className={
@ -78,7 +80,7 @@ export function UserRowClient({ user, isSelf, isLastAdmin }: UserRowClientProps)
)} )}
</div> </div>
</div> </div>
<div className="flex flex-wrap justify-end gap-1"> <div className="flex flex-wrap justify-end gap-1.5">
<Button <Button
type="button" type="button"
size="sm" size="sm"