style: improve UserManagement layout with flex-wrap and better organization

apps/admin/src/components/users/UserManagement.tsx

@@ -205,20 +205,59 @@ export function UserManagement() {
   };
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-4">
-      <div className="flex justify-between items-center">
+      {/* Header Section */}
-        <h2 className="text-2xl font-bold">User Management</h2>
+      <div>
-        <div className="flex gap-2">
+        <h3 className="text-lg font-bold text-gray-900">User Management</h3>
+        <p className="text-sm text-gray-600 mt-1">Manage and monitor your fitness clients</p>
+      </div>
+
+      {/* Filter Buttons */}
+      <div className="flex flex-wrap gap-2">
         <Button
           variant={filter === "all" ? "primary" : "secondary"}
           onClick={() => setFilter("all")}
+          className="text-xs"
         >
           All Users
         </Button>
+        <Button
+          variant={filter === "client" ? "primary" : "secondary"}
+          onClick={() => setFilter("client")}
+          className="text-xs"
+        >
+          Clients
+        </Button>
+        <Button
+          variant={filter === "trainer" ? "primary" : "secondary"}
+          onClick={() => setFilter("trainer")}
+          className="text-xs"
+        >
+          Trainers
+        </Button>
+        <Button
+          variant={filter === "admin" ? "primary" : "secondary"}
+          onClick={() => setFilter("admin")}
+          className="text-xs"
+        >
+          Admins
+        </Button>
+        <Button
+          variant={filter === "superAdmin" ? "primary" : "secondary"}
+          onClick={() => setFilter("superAdmin")}
+          className="text-xs"
+        >
+          Super Admins
+        </Button>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex flex-wrap gap-2">
         <Button
           variant="secondary"
           onClick={() => selectedUser && handleEditUser(selectedUser)}
           disabled={!selectedUser}
+          className="text-xs"
         >
           Edit User
         </Button>
@@ -235,6 +274,7 @@ export function UserManagement() {
             setSelectedUser(null);
             setIsEditing(true);
           }}
+          className="text-xs"
         >
           Invite User
         </Button>
@@ -242,55 +282,29 @@ export function UserManagement() {
           variant="secondary"
           onClick={() => selectedUser && handleDeleteUser(selectedUser)}
           disabled={!selectedUser}
+          className="text-xs"
         >
           Delete User
         </Button>
-          <Button
+        <Button variant="secondary" onClick={handleRefresh} className="text-xs">
-            variant={filter === "client" ? "primary" : "secondary"}
+          Refresh
-            onClick={() => setFilter("client")}
-          >
-            Clients
         </Button>
-          <Button
+        <Button variant="secondary" onClick={handleExport} className="text-xs">
-            variant={filter === "trainer" ? "primary" : "secondary"}
+          Export CSV
-            onClick={() => setFilter("trainer")}
-          >
-            Trainers
         </Button>
-          <Button
-            variant={filter === "admin" ? "primary" : "secondary"}
-            onClick={() => setFilter("admin")}
-          >
-            Admins
-          </Button>
-          <Button
-            variant={filter === "superAdmin" ? "primary" : "secondary"}
-            onClick={() => setFilter("superAdmin")}
-          >
-            Super Admins
-          </Button>
-        </div>
       </div>
 
-      <div className="flex justify-between items-center">
+      {/* Stats */}
-        <div className="text-sm text-gray-600">
+      <div className="text-sm text-gray-600 px-4 py-2 bg-gray-50 rounded-lg">
         Showing {users.length} users
         {selectedUser && (
-            <span className="ml-4 text-blue-600">
+          <span className="ml-4 text-blue-600 font-medium">
             Selected: {selectedUser.firstName} {selectedUser.lastName}
           </span>
         )}
       </div>
-        <div className="flex gap-2">
-          <Button variant="secondary" onClick={handleRefresh}>
-            Refresh
-          </Button>
-          <Button variant="secondary" onClick={handleExport}>
-            Export CSV
-          </Button>
-        </div>
-      </div>
 
+      {/* User Grid */}
       <Card>
         <CardContent className="p-0">
           <UserGrid