From 683c212667f578a9cd1b78ac2e7662cc4af7f440 Mon Sep 17 00:00:00 2001
From: Kato <kato@paraguay-srl.com>
Date: Sat, 5 Sep 2026 13:25:23 +0000
Subject: [PATCH] Fix member cards: round avatar images, badge placement, click
 handler for modal

---
 js/main.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/js/main.js b/js/main.js
index 9965c84..d85d32f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -548,15 +548,17 @@ async function loadUsers() {
 function createMemberCard(user) {
   const card = document.createElement('div');
   card.className = 'member-card';
+  card.setAttribute('role', 'button');
+  card.setAttribute('tabindex', '0');
   
   const rank = getRank(user.posts || 0);
   const avatarContent = user.image
-    ? `<img src="${user.image}" alt="${user.username}">`
-    : (user.username || '?').charAt(0).toUpperCase();
+    ? `<img src="${user.image}" alt="${user.username}" loading="lazy">`
+    : `<span class="user-avatar-text">${(user.username || '?').charAt(0).toUpperCase()}</span>`;
   
   card.innerHTML = `
     <div class="user-avatar">${avatarContent}</div>
-    <div class="member-info" style="position:relative;">
+    <div class="member-info">
       <h4>${user.username || 'N/A'}</h4>
       <p class="member-company">${user.company || ''}</p>
       ${user.location ? `<p class="member-location">📍 ${user.location}</p>` : ''}
@@ -565,7 +567,17 @@ function createMemberCard(user) {
     </div>
   `;
   
-  card.addEventListener('click', () => openUserDetailModal(user));
+  card.addEventListener('click', (e) => {
+    e.stopPropagation();
+    openUserDetailModal(user);
+  });
+  card.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      openUserDetailModal(user);
+    }
+  });
+  
   return card;
 }