naming convention and wrap all styles inside .table-shadow-box to avoid unexpected style in the future

src/assets/app.scss

@@ -81,34 +81,35 @@ h2 {
 }
 
 @media (max-width: 550px) {
-    tbody .shadow-box {
-        background-color: white;
-    }
 
-    div.tableShadowbox {
+    .table-shadow-box {
         padding: 10px !important;
-    }
 
-    .tableShadowbox tr {
+        thead {
-        margin-top: 0 !important;
+            display: none;
-        padding: 10px !important;
         }
 
-    .tableShadowbox thead {
+        tbody  {
-        display: none;
+            .shadow-box {
+                background-color: white;
+            }
         }
 
-    .tableShadowbox tr {
+        tr {
+            margin-top: 0 !important;
+            padding: 10px !important;
             display: block;
             margin-bottom: 10px;
-    }
 
-    .tableShadowbox td {
+            td {
                 border-bottom: 1px solid $dark-font-color;
                 display: block;
                 padding: 6px;
             }
         }
+    }
+
+}
 
 // Dark Theme override here
 .dark {
@@ -224,11 +225,15 @@ h2 {
     }
 
     @media (max-width: 550px) {
-        tbody .shadow-box {
+        .table-shadow-box {
+            tbody {
+                .shadow-box {
                     background-color: $dark-bg2;
                 }
             }
         }
+    }
+}
 
 /*
  * Transitions

src/pages/DashboardHome.vue

@@ -38,7 +38,7 @@
                 </div>
             </div>
 
-            <div class="shadow-box tableShadowbox" style="overflow-x: scroll">
+            <div class="shadow-box table-shadow-box" style="overflow-x: scroll">
                 <table class="table table-borderless table-hover">
                     <thead>
                         <tr>

src/pages/Details.vue

@@ -128,7 +128,7 @@
                 </div>
             </div>
 
-            <div class="shadow-box tableShadowbox">
+            <div class="shadow-box table-shadow-box">
                 <table class="table table-borderless table-hover">
                     <thead>
                         <tr>