fix: mobile layout issues

public/scripts/components/NodeDetailsComponent.js

@@ -217,13 +217,8 @@ class NodeDetailsComponent extends Component {
         const activeTab = (this.viewModel && typeof this.viewModel.get === 'function' && this.viewModel.get('activeTab')) || 'status';
         logger.debug('NodeDetailsComponent: Rendering with activeTab:', activeTab);
 
-        // Build labels bar (above tabs)
-        const labelsObj = (nodeStatus && nodeStatus.labels) ? nodeStatus.labels : null;
-        const labelsBar = (labelsObj && Object.keys(labelsObj).length)
-            ? `<div class="member-labels" style="margin: 0 0 12px 0;">${Object.entries(labelsObj)
-                .map(([k, v]) => `<span class=\"label-chip\">${this.escapeHtml(String(k))}: ${this.escapeHtml(String(v))}</span>`) 
-                .join('')}</div>`
-            : '';
+        // Labels are already shown in the member card header, so we don't need to show them again here
+        const labelsBar = '';
 
         const html = `
             ${labelsBar}

public/styles/main.css

@@ -416,6 +416,10 @@ p {
     margin-bottom: 2rem;
     padding: 1rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    flex-wrap: wrap;
+    gap: 1rem;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .gauge-container {
@@ -423,7 +427,9 @@ p {
     flex-direction: column;
     align-items: center;
     flex: 1;
-    max-width: 110px;
+    max-width: 130px;
+    min-width: 80px;
+    box-sizing: border-box;
 }
 
 .gauge {
@@ -433,6 +439,66 @@ p {
     margin-bottom: 0.3rem;
 }
 
+/* Mobile responsive gauges */
+@media (max-width: 768px) {
+    .resource-gauges {
+        justify-content: center;
+        gap: 0.75rem;
+        padding: 0.75rem;
+    }
+    
+    .gauge-container {
+        flex: 0 0 auto;
+        max-width: 90px;
+        min-width: 70px;
+    }
+    
+    .gauge {
+        width: 90px;
+        height: 90px;
+    }
+}
+
+@media (max-width: 480px) {
+    .resource-gauges {
+        justify-content: center;
+        gap: 0.75rem;
+        padding: 0.5rem;
+    }
+    
+    .gauge-container {
+        flex: 0 0 calc(50% - 0.375rem);
+        max-width: calc(50% - 0.375rem);
+        min-width: 0;
+    }
+    
+    .gauge {
+        width: 100px;
+        height: 100px;
+    }
+}
+
+@media (max-width: 360px) {
+    .resource-gauges {
+        justify-content: center;
+        gap: 0.5rem;
+        padding: 0.25rem;
+    }
+    
+    .gauge-container {
+        flex: 0 0 calc(50% - 0.25rem);
+        max-width: calc(50% - 0.25rem);
+        min-width: 0;
+    }
+    
+    .gauge {
+        width: 80px;
+        height: 80px;
+        max-width: 100%;
+        max-height: 100%;
+    }
+}
+
 .gauge-circle {
     position: relative;
     width: 100%;
@@ -508,6 +574,49 @@ p {
     font-weight: 400;
 }
 
+/* Responsive gauge text sizes */
+@media (max-width: 768px) {
+    .gauge-value {
+        font-size: 1rem;
+    }
+    
+    .gauge-label {
+        font-size: 0.7rem;
+    }
+    
+    .gauge-detail {
+        font-size: 0.6rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .gauge-value {
+        font-size: 0.9rem;
+    }
+    
+    .gauge-label {
+        font-size: 0.65rem;
+    }
+    
+    .gauge-detail {
+        font-size: 0.55rem;
+    }
+}
+
+@media (max-width: 360px) {
+    .gauge-value {
+        font-size: 0.8rem;
+    }
+    
+    .gauge-label {
+        font-size: 0.6rem;
+    }
+    
+    .gauge-detail {
+        font-size: 0.5rem;
+    }
+}
+
 /* Dynamic gauge colors based on percentage */
 .gauge-empty .gauge-circle {
     background: rgba(255, 255, 255, 0.1);
@@ -864,53 +973,29 @@ p {
     .tasks-summary {
         flex-direction: column;
         gap: 1rem;
-        padding: 1rem;
+        padding: 0.75rem;
         text-align: center;
     }
     
     .tasks-summary-left {
-        flex-direction: column;
-        gap: 1rem;
+        flex-direction: row;
+        gap: 0.5rem;
         align-items: center;
+        justify-content: center;
     }
     
     .tasks-summary-right {
-        flex-direction: column;
-        gap: 0.75rem;
+        flex-direction: row;
+        gap: 0.5rem;
         align-items: center;
-    }
-    
-    .summary-stat {
-        min-width: 70px;
-        padding: 0.5rem 0.75rem;
-    }
-    
-    .summary-stat-value {
-        font-size: 1.25rem;
-    }
-    
-    .summary-stat-label {
-        font-size: 0.7rem;
-    }
-    
-    .summary-icon {
-        width: 40px;
-        height: 40px;
-        font-size: 1.25rem;
-        margin-right: 0;
-        margin-bottom: 0.5rem;
-    }
-}
-
-@media (max-width: 480px) {
-    .tasks-summary {
-        padding: 0.75rem;
-        gap: 0.75rem;
+        justify-content: center;
+        flex-wrap: nowrap;
     }
     
     .summary-stat {
         min-width: 60px;
         padding: 0.4rem 0.6rem;
+        flex: 0 0 auto;
     }
     
     .summary-stat-value {
@@ -925,6 +1010,41 @@ p {
         width: 36px;
         height: 36px;
         font-size: 1.1rem;
+        margin-right: 0.5rem;
+        margin-bottom: 0;
+    }
+}
+
+@media (max-width: 480px) {
+    .tasks-summary {
+        padding: 0.5rem;
+        gap: 0.75rem;
+    }
+    
+    .tasks-summary-left,
+    .tasks-summary-right {
+        gap: 0.25rem;
+    }
+    
+    .summary-stat {
+        min-width: 50px;
+        padding: 0.3rem 0.4rem;
+        flex: 0 0 auto;
+    }
+    
+    .summary-stat-value {
+        font-size: 1rem;
+    }
+    
+    .summary-stat-label {
+        font-size: 0.6rem;
+    }
+    
+    .summary-icon {
+        width: 32px;
+        height: 32px;
+        font-size: 1rem;
+        margin-right: 0.25rem;
     }
 }