From a453e3c273a1f24eb7b4c4df8d8ef39d82b97c42 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Tue, 14 Nov 2023 13:03:14 -0700
Subject: [PATCH] Fix for important & pingImportant both true

---
 src/pages/DashboardHome.vue | 13 ++++++++-----
 src/pages/Details.vue       | 12 ++++++++----
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index ccbb90b9f..8aa0ead0f 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -43,13 +43,16 @@
                     <tbody>
                         <tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
                             <td><router-link :to="`/dashboard/${beat.monitorID}`">{{ $root.monitorList[beat.monitorID]?.name }}</router-link></td>
-                            <td v-if="beat.important"><Status :status="beat.status" /></td>
-                            <td v-if="beat.pingImportant"><Status :status="beat.pingStatus" /></td>
+                            <td>
+                                <div v-if="beat.important"><Status :status="beat.status" /></div>
+                                <div v-if="beat.pingImportant"><Status :status="beat.pingStatus" /></div>
+                            </td>
                             <td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
-                            <td v-if="beat.important" class="border-0">{{ beat.msg }}</td>
-                            <td v-if="beat.pingImportant" class="border-0">{{ beat.pingMsg }}</td>
+                            <td class="border-0">
+                                <div v-if="beat.important">{{ beat.msg }}</div>
+                                <div v-if="beat.pingImportant">{{ beat.pingMsg }}</div>
+                            </td>
                         </tr>
-
                         <tr v-if="importantHeartBeatListLength === 0">
                             <td colspan="4">
                                 {{ $t("No important events") }}
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 1dff7bcb1..c06689e93 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -219,11 +219,15 @@
                     </thead>
                     <tbody>
                         <tr v-for="(beat, index) in displayedRecords" :key="index" style="padding: 10px;">
-                            <td v-if="beat.important"><Status :status="beat.status" /></td>
-                            <td v-if="beat.pingImportant"><Status :status="beat.pingStatus" /></td>
+                            <td>
+                                <div v-if="beat.important"><Status :status="beat.status" /></div>
+                                <div v-if="beat.pingImportant"><Status :status="beat.pingStatus" /></div>
+                            </td>
                             <td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
-                            <td v-if="beat.important" class="border-0">{{ beat.msg }}</td>
-                            <td v-if="beat.pingImportant" class="border-0">{{ beat.pingMsg }}</td>
+                            <td class="border-0">
+                                <div v-if="beat.important">{{ beat.msg }}</div>
+                                <div v-if="beat.pingImportant">{{ beat.pingMsg }}</div>
+                            </td>
                         </tr>
 
                         <tr v-if="importantHeartBeatListLength === 0">