admin/petfeed
1
1 Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): make users page responsive on mobile

Browse Source 
Search input (w-64) + two status/role selects (w-36) sat in one
unwrappable row, and each user row's shrink-0 action-button cluster
(up to 6 buttons) never yielded width to the info block — both
squeezed everything together below md:. Filter bar now stacks
(search full-width, filters side by side below it), and user rows
stack info above actions on mobile, row layout from sm: up.
This commit is contained in:
admin committed 2026-08-23 16:05:50 +02:00
1 parent f7049569e1
commit 8b74ca5763
1 file changed
+30 -28
Download Patch File Download Diff File Expand all files Collapse all files
src/app/p/[secret]/users/page.tsx
+30 -28
View File
@@ -169,37 +169,39 @@ export default function AdminUsersPage() {
return (
<div className="space-y-6">
<div className="flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<h1 className="text-2xl font-bold text-zinc-100">Users</h1>
<div className="flex flex-wrap items-center gap-2">
<div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
<Input
placeholder="Search name or email…"
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-64 bg-zinc-900 border-zinc-700 text-zinc-100 placeholder:text-zinc-500"
className="w-full bg-zinc-900 border-zinc-700 text-zinc-100 placeholder:text-zinc-500 sm:w-64"
/>
<Select value={banStatus} onValueChange={(v) => setBanStatus(v as BanStatusFilter)}>
<SelectTrigger className="w-36 bg-zinc-900 border-zinc-700 text-zinc-100">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-zinc-800 border-zinc-700">
<SelectItem value="all">All statuses</SelectItem>
<SelectItem value="banned">Banned</SelectItem>
<SelectItem value="active">Active</SelectItem>
</SelectContent>
</Select>
<Select value={role} onValueChange={(v) => setRole(v as RoleFilter)}>
<SelectTrigger className="w-36 bg-zinc-900 border-zinc-700 text-zinc-100">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-zinc-800 border-zinc-700">
<SelectItem value="all">All roles</SelectItem>
<SelectItem value="none">No role</SelectItem>
<SelectItem value={AdminRoleType.SUPPORT}>Support</SelectItem>
<SelectItem value={AdminRoleType.MODERATOR}>Moderator</SelectItem>
<SelectItem value={AdminRoleType.SUPER_ADMIN}>Super Admin</SelectItem>
</SelectContent>
</Select>
<div className="flex gap-2">
<Select value={banStatus} onValueChange={(v) => setBanStatus(v as BanStatusFilter)}>
<SelectTrigger className="flex-1 bg-zinc-900 border-zinc-700 text-zinc-100 sm:w-36 sm:flex-none">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-zinc-800 border-zinc-700">
<SelectItem value="all">All statuses</SelectItem>
<SelectItem value="banned">Banned</SelectItem>
<SelectItem value="active">Active</SelectItem>
</SelectContent>
</Select>
<Select value={role} onValueChange={(v) => setRole(v as RoleFilter)}>
<SelectTrigger className="flex-1 bg-zinc-900 border-zinc-700 text-zinc-100 sm:w-36 sm:flex-none">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-zinc-800 border-zinc-700">
<SelectItem value="all">All roles</SelectItem>
<SelectItem value="none">No role</SelectItem>
<SelectItem value={AdminRoleType.SUPPORT}>Support</SelectItem>
<SelectItem value={AdminRoleType.MODERATOR}>Moderator</SelectItem>
<SelectItem value={AdminRoleType.SUPER_ADMIN}>Super Admin</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
@@ -212,9 +214,9 @@ export default function AdminUsersPage() {
{users.map((user) => (
<div
key={user.id}
className="flex items-center gap-4 rounded-xl border border-zinc-800 bg-zinc-900 px-4 py-3"
className="flex flex-col gap-3 rounded-xl border border-zinc-800 bg-zinc-900 px-4 py-3 sm:flex-row sm:items-center sm:gap-4"
>
<div className="flex-1 min-w-0">
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<p className="text-sm text-zinc-100 font-mono truncate">{user.id}</p>
{isActiveSponsor({
@@ -290,7 +292,7 @@ export default function AdminUsersPage() {
<p className="text-xs text-violet-400 mt-0.5">Shadowban: {user.shadowban.reason}</p>
)}
</div>
<div className="shrink-0 flex flex-wrap items-center justify-end gap-2 max-w-md">
<div className="flex flex-wrap items-center gap-2 sm:max-w-md sm:shrink-0 sm:justify-end">
{user.pets[0] && (
<Button
size="sm"