CSS optimizations

src/assets/app.scss

@@ -84,6 +84,30 @@ h2 {
     tbody .shadow-box {
         background-color: white;
     }
+
+    div.tableShadowbox {
+        padding: 10px !important;
+    }
+
+    .tableShadowbox tr {
+        margin-top: 0 !important;
+        padding: 10px !important;
+    }
+
+    .tableShadowbox thead {
+        display: none;
+    }
+  
+    .tableShadowbox tr {
+        display: block;
+        margin-bottom: 10px;
+    }
+  
+    .tableShadowbox td {
+        border-bottom: 1px solid $dark-font-color;
+        display: block;
+        padding: 6px;
+    }
 }
 
 // Dark Theme override here

src/pages/DashboardHome.vue

@@ -38,7 +38,7 @@
                 </div>
             </div>
 
-            <div class="shadow-box" style="margin-top: 25px;overflow-x: scroll">
+            <div class="shadow-box tableShadowbox" style="overflow-x: scroll">
                 <table class="table table-borderless table-hover">
                     <thead>
                         <tr>
@@ -182,6 +182,7 @@ export default {
 
 .shadow-box {
     padding: 20px;
+    margin-top: 25px;
 }
 
 table {
@@ -191,25 +192,4 @@ table {
         transition: all ease-in-out 0.2ms;
     }
 }
-
-@media (max-width: 550px) {
-    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>

src/pages/Details.vue

@@ -128,7 +128,7 @@
                 </div>
             </div>
 
-            <div class="shadow-box">
+            <div class="shadow-box tableShadowbox">
                 <table class="table table-borderless table-hover">
                     <thead>
                         <tr>
@@ -138,10 +138,10 @@
                         </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}" style="padding: 10px;">
                             <td><Status :status="beat.status" /></td>
-                            <td><Datetime :value="beat.time" /></td>
-                            <td>{{ beat.msg }}</td>
+                            <td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
+                            <td class="border-0">{{ beat.msg }}</td>
                         </tr>
 
                         <tr v-if="importantHeartBeatList.length === 0">