From 8b74ca57634dca0d8948356070cbfe975f5e2a0a Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Sun, 23 Aug 2026 16:05:50 +0200
Subject: [PATCH] fix(admin): make users page responsive on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/app/p/[secret]/users/page.tsx | 58 ++++++++++++++++---------------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/app/p/[secret]/users/page.tsx b/src/app/p/[secret]/users/page.tsx
index 1dd09df..b9fb8d3 100644
--- a/src/app/p/[secret]/users/page.tsx
+++ b/src/app/p/[secret]/users/page.tsx
@@ -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"