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;
}
}