From 9f8b031cc03e505f1531c047f72d917a55250034 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Thu, 27 Feb 2025 23:36:08 -0500
Subject: [PATCH] Fix up message widths (take 1)

---
 pvc-vue/src/components/ClusterOverview.vue | 121 ++++++++++++++-------
 1 file changed, 82 insertions(+), 39 deletions(-)

diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue
index 7f581e8..1d1a12d 100644
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/pvc-vue/src/components/ClusterOverview.vue
@@ -185,7 +185,11 @@
                 <div 
                   v-for="(msg, idx) in displayMessages" 
                   :key="idx"
-                  :class="['health-message', getDeltaClass(msg.health_delta)]"
+                  :class="[
+                    'health-message', 
+                    getDeltaClass(msg.health_delta),
+                    {'full-width-message': isSpecialMessage(msg)}
+                  ]"
                   :title="msg.text || 'No details available'"
                 >
                   <i class="fas fa-circle-exclamation me-1"></i>
@@ -513,6 +517,12 @@ const chartOptions = {
     chart.resize();  /* Force resize on container change */
   }
 };
+
+// Add a new function to identify special messages
+const isSpecialMessage = (msg) => {
+  return msg.maintenance === true || 
+         msg.id === "No issues detected";
+};
 </script>
 
 <style scoped>
@@ -551,7 +561,7 @@ const chartOptions = {
 
 .messages-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, 1fr); /* Match graphs: 4 across by default */
   gap: 0.5rem;
   width: 100%;
 }
@@ -561,13 +571,23 @@ const chartOptions = {
   text-align: left;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   position: relative;
-  height: 2.5em;
+  height: auto;
+  min-height: 2.5em;
+  white-space: nowrap;  /* Prevent text wrapping */
   display: flex;
   align-items: center;
+  min-width: 0;  /* Allow shrinking within grid cell */
+  flex: 1;  /* Take up available space */
+}
+
+/* Add specific handling for message text to prevent wrapping */
+.message-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .health-message.healthy {
@@ -575,18 +595,6 @@ const chartOptions = {
   color: #28a745;
 }
 
-.health-message:hover {
-  &.delta-low {
-    background: rgba(40, 167, 69, 0.15);
-  }
-  &.delta-medium {
-    background: rgba(255, 193, 7, 0.15);
-  }
-  &.delta-high {
-    background: rgba(220, 53, 69, 0.15);
-  }
-}
-
 .health-message:hover::after {
   content: attr(title);
   position: absolute;
@@ -621,22 +629,22 @@ const chartOptions = {
 }
 
 .delta-low {
-  background: rgba(40, 167, 69, 0.1);
-  color: #0d5524;  /* Darker green */
+  background: rgba(40, 167, 69, 0.15);  /* Darker green background */
+  color: #0d5524;
 }
 
 .delta-medium {
-  background: rgba(255, 193, 7, 0.1);
-  color: #856404;  /* Darker yellow */
+  background: rgba(255, 193, 7, 0.15);  /* Darker yellow background */
+  color: #856404;
 }
 
 .delta-high {
-  background: rgba(220, 53, 69, 0.1);
-  color: #721c24;  /* Darker red */
+  background: rgba(220, 53, 69, 0.15);  /* Darker red background */
+  color: #721c24;
 }
 
 .delta-info {
-  background: rgba(13, 110, 253, 0.1);
+  background: rgba(13, 110, 253, 0.15);  /* Darker blue background */
   color: #0d6efd;
 }
 
@@ -715,40 +723,48 @@ const chartOptions = {
 
 @media (max-width: 1500px) {
   .metrics-row {
-    grid-template-columns: repeat(4, 1fr);  /* 4 cards per row */
+    grid-template-columns: repeat(4, 1fr);
   }
   
   .graphs-row {
-    grid-template-columns: repeat(2, 1fr);  /* 2 graphs per row */
+    grid-template-columns: repeat(2, 1fr);
   }
   
+  /* Match graphs: 2 across at this breakpoint */
   .messages-grid {
-    grid-template-columns: repeat(2, 1fr);  /* 2 messages per row */
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media (max-width: 1148px) {
-  .metrics-row {
-    grid-template-columns: repeat(2, 1fr);  /* 2 cards per row */
-  }
-  
-  .graphs-row {
-    grid-template-columns: 1fr;  /* 1 graph per row */
-  }
-  
+  /* Match graphs: 1 across at this breakpoint */
   .messages-grid {
-    grid-template-columns: 1fr;  /* 1 message per row */
+    grid-template-columns: 1fr;
   }
 }
 
-/* Fine-tune for very small screens */
 @media (max-width: 740px) {
-  .metrics-row, .graphs-row, .messages-grid {
-    grid-template-columns: 1fr;  /* Everything in single column */
+  .metrics-row, .graphs-row {
+    grid-template-columns: 1fr;
+  }
+  
+  /* Allow messages to be narrower on very small screens */
+  .messages-grid {
+    grid-template-columns: 1fr; /* Already 1fr from previous breakpoint */
+  }
+  
+  /* 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;  /* Allow cards to shrink further on very small screens */
+    min-width: 0;
   }
 }
 
@@ -794,4 +810,31 @@ const chartOptions = {
   height: 100%;
   min-width: 0;
 }
+
+/* Add new style for full-width messages */
+.full-width-message {
+  grid-column: 1 / -1;  /* Span all columns in the grid */
+  justify-content: center;  /* Center the text */
+  text-align: center;
+  font-weight: 500;  /* Make it slightly bolder */
+  font-size: 1rem;   /* Make it slightly larger */
+  background: rgba(13, 110, 253, 0.05);  /* Lighter background */
+  border: 1px solid rgba(13, 110, 253, 0.1);  /* Subtle border */
+  padding: 0.5rem 1rem;  /* More padding */
+  display: flex;  /* Ensure flex display */
+  align-items: center;  /* Center content vertically */
+}
+
+/* Specific colors for different message types */
+.full-width-message.delta-low {
+  background: rgba(40, 167, 69, 0.15);  /* Match regular message background */
+  border: 1px solid rgba(40, 167, 69, 0.1);
+  color: #0d5524;
+}
+
+.full-width-message.delta-info {
+  background: rgba(13, 110, 253, 0.15);  /* Match regular message background */
+  border: 1px solid rgba(13, 110, 253, 0.1);
+  color: #0d6efd;
+}
 </style>