fix: wallboard display glitch in Safari

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/views/wallboard/hex-mesh.vue

@@ -183,8 +183,7 @@ export default {
 }
 
 .hex polygon {
-  fill: theme('colors.gray.200');
-  stroke: theme('colors.gray.200');
+  fill: transparent;
   transition: all ease-out 250ms;
 }
 
@@ -193,15 +192,4 @@ export default {
   stroke-opacity: 1;
   stroke-width: 2;
 }
-
-.hex__body {
-  position: relative;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
 </style>

spring-boot-admin-server-ui/src/main/frontend/views/wallboard/index.vue

@@ -33,6 +33,7 @@
           :key="application.name"
           class="hex__body application"
         >
+          <div class="application__status-indicator"></div>
           <div class="application__header application__time-ago is-muted">
             <sba-time-ago :date="application.statusTimestamp" />
           </div>
@@ -170,6 +171,7 @@
   fill:  theme('colors.red.400');
   stroke-width: 2;
 }
+
 .hex .hex__body::after {
   display: flex;
   justify-content: center;
@@ -180,6 +182,17 @@
   width: 100%;
 }
 
+.hex .hex__body {
+  position: fixed;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 .hex.down .hex__body::after {
   content: "!";
   color: theme('colors.red.400');