From f732eb738583e4e59907c2f8d22976d2bd81d0fb Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 9 Dec 2025 12:40:45 +0100
Subject: [PATCH] feat: user admin ui : condensed

---
 components/UserManagement.tsx | 56 +++++++++++++++++------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/components/UserManagement.tsx b/components/UserManagement.tsx
index 3bce639..547c437 100644
--- a/components/UserManagement.tsx
+++ b/components/UserManagement.tsx
@@ -146,12 +146,12 @@ export default function UserManagement() {
           return (
             <div
               key={user.id}
-              className="bg-black/60 border border-pixel-gold/20 rounded p-4"
+              className="bg-black/60 border border-pixel-gold/20 rounded p-3"
             >
-              <div className="flex justify-between items-start mb-4">
-                <div className="flex gap-4 items-start">
+              <div className="flex justify-between items-center mb-2">
+                <div className="flex gap-3 items-center flex-1 min-w-0">
                   {/* Avatar */}
-                  <div className="w-16 h-16 rounded-full border-2 border-pixel-gold/50 overflow-hidden bg-black/60 flex-shrink-0">
+                  <div className="w-10 h-10 rounded-full border-2 border-pixel-gold/50 overflow-hidden bg-black/60 flex-shrink-0">
                     {user.avatar ? (
                       <img
                         src={user.avatar}
@@ -163,28 +163,28 @@ export default function UserManagement() {
                         }}
                       />
                     ) : null}
-                    <div className={`w-full h-full flex items-center justify-center text-pixel-gold text-xl font-bold ${user.avatar ? "hidden" : ""}`}>
+                    <div className={`w-full h-full flex items-center justify-center text-pixel-gold text-sm font-bold ${user.avatar ? "hidden" : ""}`}>
                       {user.username.charAt(0).toUpperCase()}
                     </div>
                   </div>
-                  <div>
-                    <h3 className="text-pixel-gold font-bold text-lg">
-                      {user.username}
-                    </h3>
-                    <p className="text-gray-400 text-sm">{user.email}</p>
-                    <div className="flex gap-4 mt-2 text-xs text-gray-500">
-                      <span>Niveau {user.level}</span>
-                      <span>Score: {formatNumber(user.score)}</span>
-                      <span className={user.role === "ADMIN" ? "text-pixel-gold" : ""}>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <h3 className="text-pixel-gold font-bold text-base">
+                        {user.username}
+                      </h3>
+                      <span className="text-xs text-gray-500">Niveau {user.level}</span>
+                      <span className="text-xs text-gray-500">Score: {formatNumber(user.score)}</span>
+                      <span className={`text-xs ${user.role === "ADMIN" ? "text-pixel-gold" : "text-gray-500"}`}>
                         {user.role}
                       </span>
                     </div>
+                    <p className="text-gray-400 text-xs truncate">{user.email}</p>
                   </div>
                 </div>
                 {!isEditing && (
                   <button
                     onClick={() => handleEdit(user)}
-                    className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition"
+                    className="px-3 py-1.5 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition flex-shrink-0 ml-2"
                   >
                     Modifier
                   </button>
@@ -510,15 +510,15 @@ export default function UserManagement() {
                   </div>
                 </div>
               ) : (
-                <div className="space-y-2">
-                  <div>
-                    <div className="flex justify-between items-center mb-1">
-                      <span className="text-xs text-gray-400">HP</span>
-                      <span className="text-xs text-gray-400">
-                        {user.hp} / {user.maxHp}
+                <div className="flex gap-4 text-xs">
+                  <div className="flex-1">
+                    <div className="flex justify-between items-center mb-0.5">
+                      <span className="text-gray-400">HP</span>
+                      <span className="text-gray-400">
+                        {user.hp}/{user.maxHp}
                       </span>
                     </div>
-                    <div className="h-2 bg-black/60 rounded-full overflow-hidden">
+                    <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
                       <div
                         className="h-full bg-gradient-to-r from-red-600 to-green-500"
                         style={{
@@ -527,14 +527,14 @@ export default function UserManagement() {
                       />
                     </div>
                   </div>
-                  <div>
-                    <div className="flex justify-between items-center mb-1">
-                      <span className="text-xs text-gray-400">XP</span>
-                      <span className="text-xs text-gray-400">
-                        {formatNumber(user.xp)} / {formatNumber(user.maxXp)}
+                  <div className="flex-1">
+                    <div className="flex justify-between items-center mb-0.5">
+                      <span className="text-gray-400">XP</span>
+                      <span className="text-gray-400">
+                        {formatNumber(user.xp)}/{formatNumber(user.maxXp)}
                       </span>
                     </div>
-                    <div className="h-2 bg-black/60 rounded-full overflow-hidden">
+                    <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
                       <div
                         className="h-full bg-gradient-to-r from-blue-600 to-purple-500"
                         style={{