Refactor UI components for improved responsiveness and consistency: Update styles in AdminPanel, EventManagement, FeedbackManagement, HeroSection, ImageSelector, LeaderboardSection, Navigation, PlayerStats, and UserManagement to enhance mobile and desktop layouts. Adjust text sizes, padding, and button styles for better user experience across devices.

components/FeedbackManagement.tsx

@@ -74,18 +74,20 @@ export default function FeedbackManagement() {
 
   const renderStars = (rating: number) => {
     return (
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-0.5 sm:gap-1">
         {[1, 2, 3, 4, 5].map((star) => (
           <span
             key={star}
-            className={`text-lg ${
+            className={`text-sm sm:text-lg ${
               star <= rating ? "text-pixel-gold" : "text-gray-600"
             }`}
           >
             ★
           </span>
         ))}
-        <span className="text-gray-400 text-sm ml-2">({rating}/5)</span>
+        <span className="text-gray-400 text-xs sm:text-sm ml-1 sm:ml-2">
+          ({rating}/5)
+        </span>
       </div>
     );
   };
@@ -96,25 +98,25 @@ export default function FeedbackManagement() {
 
   if (loading) {
     return (
-      <div className="bg-black/60 border border-pixel-gold/30 rounded-lg p-8">
-        <p className="text-gray-400 text-center">Chargement...</p>
+      <div className="bg-black/60 border border-pixel-gold/30 rounded-lg p-4 sm:p-8">
+        <p className="text-gray-400 text-center text-sm">Chargement...</p>
       </div>
     );
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-4 sm:space-y-6">
       {/* Statistiques par événement */}
       {statistics.length > 0 && (
-        <div className="bg-black/60 border border-pixel-gold/30 rounded-lg p-6">
-          <h3 className="text-pixel-gold font-bold text-lg mb-4">
+        <div className="bg-black/60 border border-pixel-gold/30 rounded-lg p-3 sm:p-6">
+          <h3 className="text-pixel-gold font-bold text-base sm:text-lg mb-4 break-words">
             Statistiques par événement
           </h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
             {statistics.map((stat) => (
               <div
                 key={stat.eventId}
-                className={`bg-black/40 border rounded p-4 cursor-pointer transition ${
+                className={`bg-black/40 border rounded p-3 sm:p-4 cursor-pointer transition ${
                   selectedEvent === stat.eventId
                     ? "border-pixel-gold bg-pixel-gold/10"
                     : "border-pixel-gold/30 hover:border-pixel-gold/50"
@@ -125,21 +127,21 @@ export default function FeedbackManagement() {
                   )
                 }
               >
-                <div className="flex items-start justify-between mb-2">
-                  <h4 className="text-white font-semibold text-sm">
+                <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 mb-2">
+                  <h4 className="text-white font-semibold text-xs sm:text-sm break-words">
                     {stat.eventName}
                   </h4>
-                  <span className="text-pixel-gold text-xs uppercase">
+                  <span className="text-pixel-gold text-[10px] sm:text-xs uppercase whitespace-nowrap flex-shrink-0">
                     {stat.eventType && getEventTypeLabel(stat.eventType)}
                   </span>
                 </div>
                 <div className="flex items-center gap-2 mb-2">
                   {renderStars(Math.round(stat.averageRating))}
                 </div>
-                <div className="text-gray-400 text-xs">
+                <div className="text-gray-400 text-[10px] sm:text-xs">
                   Moyenne: {stat.averageRating.toFixed(2)}/5
                 </div>
-                <div className="text-gray-400 text-xs">
+                <div className="text-gray-400 text-[10px] sm:text-xs">
                   {stat.feedbackCount} feedback
                   {stat.feedbackCount > 1 ? "s" : ""}
                 </div>
@@ -149,7 +151,7 @@ export default function FeedbackManagement() {
           {selectedEvent && (
             <button
               onClick={() => setSelectedEvent(null)}
-              className="mt-4 text-pixel-gold text-sm hover:text-orange-400 transition"
+              className="mt-4 text-pixel-gold text-xs sm:text-sm hover:text-orange-400 transition"
             >
               Voir tous les feedbacks
             </button>
@@ -158,8 +160,8 @@ export default function FeedbackManagement() {
       )}
 
       {/* Liste des feedbacks */}
-      <div className="bg-black/60 border border-pixel-gold/30 rounded-lg p-6">
-        <h3 className="text-pixel-gold font-bold text-lg mb-4">
+      <div className="bg-black/60 border border-pixel-gold/30 rounded-lg p-3 sm:p-6">
+        <h3 className="text-pixel-gold font-bold text-base sm:text-lg mb-4 break-words">
           {selectedEvent
             ? `Feedbacks pour: ${
                 statistics.find((s) => s.eventId === selectedEvent)?.eventName
@@ -168,36 +170,36 @@ export default function FeedbackManagement() {
         </h3>
 
         {error && (
-          <div className="bg-red-900/50 border border-red-500/50 text-red-400 px-4 py-3 rounded text-sm mb-4">
+          <div className="bg-red-900/50 border border-red-500/50 text-red-400 px-3 sm:px-4 py-2 sm:py-3 rounded text-xs sm:text-sm mb-4">
             {error}
           </div>
         )}
 
         {filteredFeedbacks.length === 0 ? (
-          <p className="text-gray-400 text-center py-8">
+          <p className="text-gray-400 text-center py-8 text-sm">
             Aucun feedback pour le moment
           </p>
         ) : (
-          <div className="space-y-4">
+          <div className="space-y-3 sm:space-y-4">
             {filteredFeedbacks.map((feedback) => (
               <div
                 key={feedback.id}
-                className="bg-black/40 border border-pixel-gold/20 rounded p-4"
+                className="bg-black/40 border border-pixel-gold/20 rounded p-3 sm:p-4"
               >
-                <div className="flex items-start justify-between mb-3">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-3 mb-2">
-                      <h4 className="text-white font-semibold">
+                <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-3">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 mb-2">
+                      <h4 className="text-white font-semibold text-sm sm:text-base break-words">
                         {feedback.user.username}
                       </h4>
-                      <span className="text-gray-500 text-xs">
+                      <span className="text-gray-500 text-[10px] sm:text-xs break-all">
                         {feedback.user.email}
                       </span>
                     </div>
-                    <div className="text-pixel-gold text-sm font-semibold mb-2">
+                    <div className="text-pixel-gold text-xs sm:text-sm font-semibold mb-2 break-words">
                       {feedback.event.name}
                     </div>
-                    <div className="text-gray-500 text-xs mb-2">
+                    <div className="text-gray-500 text-[10px] sm:text-xs mb-2">
                       {new Date(feedback.createdAt).toLocaleDateString(
                         "fr-FR",
                         {
@@ -210,11 +212,13 @@ export default function FeedbackManagement() {
                       )}
                     </div>
                   </div>
-                  <div>{renderStars(feedback.rating)}</div>
+                  <div className="flex-shrink-0">
+                    {renderStars(feedback.rating)}
+                  </div>
                 </div>
                 {feedback.comment && (
                   <div className="mt-3 pt-3 border-t border-pixel-gold/20">
-                    <p className="text-gray-300 text-sm whitespace-pre-wrap">
+                    <p className="text-gray-300 text-xs sm:text-sm whitespace-pre-wrap break-words">
                       {feedback.comment}
                     </p>
                   </div>