Improve titles and responsive layout

pvc-vue/src/components/ClusterOverview.vue

@@ -6,7 +6,7 @@
       <div v-if="!sections.info" class="section-content-wrapper">
         <div class="section-content">
           <div class="collapsed-section-header">
-            <h6 class="card-title mb-0 metric-label">Information</h6>
+            <h6 class="card-title mb-0 metric-label">Cluster Information</h6>
           </div>
         </div>
         <div class="toggle-column">
@@ -130,7 +130,7 @@
       <div v-if="!sections.graphs" class="section-content-wrapper">
         <div class="section-content">
           <div class="collapsed-section-header">
-            <h6 class="card-title mb-0 metric-label">Utilization</h6>
+            <h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
           </div>
         </div>
         <div class="toggle-column">
@@ -240,7 +240,7 @@
           <!-- Health messages card -->
           <div class="metric-card">
             <div class="card-header">
-              <h6 class="card-title mb-0 metric-label">Messages</h6>
+              <h6 class="card-title mb-0 metric-label">Health Messages</h6>
             </div>
             <div class="card-body">
               <div class="messages-list">
@@ -1110,14 +1110,12 @@ const toggleSection = (section) => {
 
 .metrics-row {
   display: grid;
-  grid-template-columns: repeat(8, 1fr);
   gap: 0.5rem;
   width: 100%;
 }
 
 .graphs-row {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
   gap: 0.5rem;
   width: 100%;
 }
@@ -1215,53 +1213,61 @@ const toggleSection = (section) => {
   text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
-@media (max-width: 1500px) {
+@media (min-width: 1201px) {
   .metrics-row {
     grid-template-columns: repeat(4, 1fr);
   }
   
+  /* 4x1 for health/utilization graphs in full width */
+  .graphs-row {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  
+  /* 3x1 for state graphs in full width */
+  .states-graphs-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 801px) and (max-width: 1200px) {
+  .metrics-row {
+    grid-template-columns: repeat(2, 1fr); /* 2 columns when between 800px and 1200px */
+  }
+  
+  /* 2x2 for health/utilization graphs in medium width */
   .graphs-row {
     grid-template-columns: repeat(2, 1fr);
   }
   
-  /* Match graphs: 2 across at this breakpoint */
+  /* 1x3 for state graphs in medium width (vertical stack) */
-  .messages-list {
+  .states-graphs-row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 1148px) {
-  /* Match graphs: 1 across at this breakpoint */
-  .messages-list {
     grid-template-columns: 1fr;
   }
 }
 
-@media (max-width: 740px) {
+@media (max-width: 800px) {
-  .metrics-row, .graphs-row {
+  .metrics-row {
+    grid-template-columns: 1fr; /* 1 column when <= 800px */
+  }
+  
+  /* 1x4 for health/utilization graphs in narrow width */
+  .graphs-row {
     grid-template-columns: 1fr;
   }
   
-  /* Allow messages to be narrower on very small screens */
+  /* 1x3 for state graphs in narrow width */
-  .messages-list {
+  .states-graphs-row {
-    grid-template-columns: 1fr; /* Already 1fr from previous breakpoint */
+    grid-template-columns: 1fr;
-  }
-  
-  /* Even on small screens, ensure messages have reasonable width */
-  .health-message {
-    min-width: 0; /* Allow shrinking */
-    white-space: normal; /* Allow text wrapping on small screens */
-  }
-  
-  .message-text {
-    white-space: normal; /* Allow text wrapping on small screens */
-  }
-  
-  .metric-card {
-    min-width: 0;
   }
 }
 
+/* Base styles for graphs-row and states-graphs-row */
+.graphs-row, .states-graphs-row {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+}
+
 .status-maintenance {
   color: #0d6efd;  /* Bootstrap blue */
 }
@@ -1392,38 +1398,6 @@ const toggleSection = (section) => {
   padding: 0.5rem;  /* Consistent padding on all sides */
 }
 
-/* New row for the 3 state graphs with wider minimum width */
-.states-graphs-row {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
-  gap: 0.5rem;
-  width: 100%;
-}
-
-/* Responsive behavior for state graphs */
-@media (max-width: 1500px) {
-  .states-graphs-row {
-    grid-template-columns: repeat(3, 1fr);  /* Keep 3 columns at this breakpoint */
-  }
-}
-
-@media (max-width: 1148px) {
-  .states-graphs-row {
-    grid-template-columns: repeat(2, 1fr);  /* 2 columns at medium size */
-  }
-  
-  /* Make state graphs have a wider minimum width */
-  .states-graphs-row .metric-card {
-    min-width: 216px;  /* 20% wider than the 180px for other cards */
-  }
-}
-
-@media (max-width: 740px) {
-  .states-graphs-row {
-    grid-template-columns: 1fr;  /* 1 column at small size */
-  }
-}
-
 /* Darker legend text for better readability */
 :deep(.chartjs-legend-item) {
   color: #333 !important;