Added clean monitor table for smaller screens

src/assets/app.scss

@@ -80,6 +80,12 @@ h2 {
     }
 }
 
+@media (max-width: 550px) {
+    tbody .shadow-box {
+        background-color: white;
+    }
+}
+
 // Dark Theme override here
 .dark {
     background-color: #090C10;
@@ -192,6 +198,12 @@ h2 {
     .multiselect__option--selected {
         background-color: $dark-bg;
     }
+
+    @media (max-width: 550px) {
+        tbody .shadow-box {
+            background-color: $dark-bg2;
+        }
+    }
 }
 
 /*

src/pages/DashboardHome.vue

@@ -49,11 +49,11 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr v-for="(beat, index) in displayedRecords" :key="index">
+                        <tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
                             <td>{{ beat.name }}</td>
                             <td><Status :status="beat.status" /></td>
                             <td><Datetime :value="beat.time" /></td>
-                            <td>{{ beat.msg }}</td>
+                            <td class="no-border">{{ beat.msg }}</td>
                         </tr>
 
                         <tr v-if="importantHeartBeatList.length === 0">
@@ -191,4 +191,29 @@ table {
         transition: all ease-in-out 0.2ms;
     }
 }
+
+@media (max-width: 550px) {
+    .no-border {
+        border: 0px;
+    }
+
+    tr.shadow-box, .shadow-box:last-child {
+        padding: 10px;
+    }
+
+    thead {
+        display: none;
+    }
+  
+    tr {
+        display: block;
+        margin-bottom: 10px;
+    }
+  
+    td {
+        border-bottom: 1px solid $dark-font-color;
+        display: block;
+        padding: 6px;
+    }
+}
 </style>