diff --git a/public/scripts/components/NodeDetailsComponent.js b/public/scripts/components/NodeDetailsComponent.js index 4e87aea..f9fcd3d 100644 --- a/public/scripts/components/NodeDetailsComponent.js +++ b/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) - ? `
${Object.entries(labelsObj) - .map(([k, v]) => `${this.escapeHtml(String(k))}: ${this.escapeHtml(String(v))}`) - .join('')}
` - : ''; + // Labels are already shown in the member card header, so we don't need to show them again here + const labelsBar = ''; const html = ` ${labelsBar} diff --git a/public/styles/main.css b/public/styles/main.css index a47dff7..4ce911d 100644 --- a/public/styles/main.css +++ b/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; } }