feat: improve styling

public/components.js

@@ -2905,8 +2905,10 @@ class MemberCardOverlayComponent extends Component {
 
     setupEventListeners() {
         // Close overlay when clicking outside or pressing escape
-        this.addEventListener(document, 'click', (e) => {
-            if (this.isVisible && !this.container.contains(e.target)) {
+        this.addEventListener(this.container, 'click', (e) => {
+            if (!this.isVisible) return;
+            // Only close when clicking on the backdrop, not inside the dialog content
+            if (e.target === this.container) {
                 this.hide();
             }
         });
@@ -2934,8 +2936,10 @@ class MemberCardOverlayComponent extends Component {
         this.setupMemberCardInteractions();
     }
 
-
-
+    
+    
+    
+    
     hide() {
         this.isVisible = false;
         this.container.classList.remove('visible');
@@ -2977,11 +2981,9 @@ class MemberCardOverlayComponent extends Component {
                                     <span class="latency-label">Latency:</span>
                                     <span class="latency-value">${member.latency ? member.latency + 'ms' : 'N/A'}</span>
                                 </div>
-                                ${member.labels && Object.keys(member.labels).length ? `
-                                <div class="member-labels">
-                                    ${Object.entries(member.labels).map(([key, value]) => `<span class="label-chip">${key}: ${value}</span>`).join('')}
+                                <div class="member-labels" style="display: none;">
+                                    <!-- Labels will be populated dynamically from node status API -->
                                 </div>
-                                ` : ''}
                             </div>
                         </div>
                         <div class="member-details">
@@ -3008,7 +3010,7 @@ class MemberCardOverlayComponent extends Component {
             if (memberCard) {
                 const memberDetails = memberCard.querySelector('.member-details');
                 const memberIp = memberCard.dataset.memberIp;
-
+                
                 // Automatically expand the card to show details
                 await this.expandCard(memberCard, memberIp, memberDetails);
             }
@@ -3024,39 +3026,49 @@ class MemberCardOverlayComponent extends Component {
             // Load node details
             await nodeDetailsVM.loadNodeDetails(memberIp);
             
+            // Update the labels in the member header with the actual node status data
+            const nodeStatus = nodeDetailsVM.get('nodeStatus');
+            if (nodeStatus && nodeStatus.labels) {
+                const labelsContainer = card.querySelector('.member-labels');
+                if (labelsContainer) {
+                    // Update existing labels container and show it
+                    labelsContainer.innerHTML = Object.entries(nodeStatus.labels)
+                        .map(([key, value]) => `<span class="label-chip">${key}: ${value}</span>`)
+                        .join('');
+                    labelsContainer.style.display = 'block';
+                } else {
+                    // Create new labels container if it doesn't exist
+                    const memberInfo = card.querySelector('.member-info');
+                    if (memberInfo) {
+                        const labelsDiv = document.createElement('div');
+                        labelsDiv.className = 'member-labels';
+                        labelsDiv.innerHTML = Object.entries(nodeStatus.labels)
+                            .map(([key, value]) => `<span class="label-chip">${key}: ${value}</span>`)
+                            .join('');
+                        
+                        // Insert after latency
+                        const latencyDiv = memberInfo.querySelector('.member-latency');
+                        if (latencyDiv) {
+                            latencyDiv.parentNode.insertBefore(labelsDiv, latencyDiv.nextSibling);
+                        }
+                    }
+                }
+            }
+            
             // Mount the component
             nodeDetailsComponent.mount();
             
             // Update UI
             card.classList.add('expanded');
-            const expandIcon = card.querySelector('.expand-icon');
-            if (expandIcon) {
-                expandIcon.classList.add('expanded');
-            }
             
         } catch (error) {
-            console.error('Failed to expand card:', error);
-            memberDetails.innerHTML = `
-                <div class="error">
-                    <strong>Error loading node details:</strong><br>
-                    ${error.message}
-                </div>
-            `;
+            console.error('Failed to expand member card:', error);
+            // Still show the UI even if details fail to load
+            card.classList.add('expanded');
+            const details = card.querySelector('.member-details');
+            if (details) {
+                details.innerHTML = '<div class="error">Failed to load node details</div>';
+            }
         }
     }
-
-    collapseCard(card, expandIcon) {
-        card.classList.remove('expanded');
-        if (expandIcon) {
-            expandIcon.classList.remove('expanded');
-        }
-        
-        // Reset member details to loading state
-        const memberDetails = card.querySelector('.member-details');
-        if (memberDetails) {
-            memberDetails.innerHTML = '<div class="loading-details">Loading detailed information...</div>';
-        }
-    }
-
-
 }