From ed6d2e763db703be058fbce0f55b3a8c89042ad2 Mon Sep 17 00:00:00 2001
From: Benoit <benoit.91800@hotmail.fr>
Date: Sat, 23 May 2026 09:57:00 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20augmentation=20hauteur=20UserList=20et?=
 =?UTF-8?q?=20am=C3=A9lioration=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CORRECTIONS :
- Hauteur max passée de 180px à 300px (desktop)
- Hauteur max passée de 150px à 250px (mobile)
- Ajout min-height: 100px pour garantir visibilité

AMÉLIORATIONS SCROLL :
- Scrollbar personnalisée fine et discrète
- Support -webkit-overflow-scrolling: touch (iOS)
- Scrollbar visible au hover (desktop)
- Gap réduit entre items pour densité optimale

RESPONSIVE :
- Portrait mobile : 200px max
- Paysage : 120px max (priorité au bouton PTT)
- Padding réduit pour maximiser l'espace visible

Résultat : Affichage de 4-5 utilisateurs au lieu de 1-2

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 client/src/components/UserList.css | 48 ++++++++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/client/src/components/UserList.css b/client/src/components/UserList.css
index 09665ea..c6fab18 100644
--- a/client/src/components/UserList.css
+++ b/client/src/components/UserList.css
@@ -3,8 +3,32 @@
 .user-list {
   background: var(--color-surface);
   border-bottom: 1px solid var(--color-border);
-  max-height: 180px;
+  max-height: 300px;
   overflow-y: auto;
+  overflow-x: hidden;
+  /* Améliorer le scroll sur mobile */
+  -webkit-overflow-scrolling: touch;
+  /* Style de scrollbar personnalisé */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+}
+
+/* Scrollbar personnalisée (webkit) */
+.user-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.user-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.user-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+}
+
+.user-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
 }
 
 .user-list.empty {
@@ -36,7 +60,10 @@
 }
 
 .user-list-items {
-  padding: var(--spacing-sm);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
 /* Item utilisateur */
@@ -131,7 +158,7 @@
 /* Responsive */
 @media (max-width: 640px) {
   .user-list {
-    max-height: 150px;
+    max-height: 250px;
   }
 
   .user-avatar {
@@ -148,3 +175,18 @@
     font-size: 0.75rem;
   }
 }
+
+/* Portrait mobile - encore plus d'espace */
+@media (max-width: 640px) and (orientation: portrait) {
+  .user-list {
+    max-height: 200px;
+    min-height: 100px;
+  }
+}
+
+/* Paysage - réduire un peu pour laisser place au PTT */
+@media (max-height: 500px) and (orientation: landscape) {
+  .user-list {
+    max-height: 120px;
+  }
+}