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

src/assets/app.scss

@@ -81,33 +81,34 @@ 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 {
-        display: block;
+            margin-top: 0 !important;
-        margin-bottom: 10px;
+            padding: 10px !important;
+            display: block;
+            margin-bottom: 10px;
+
+            td {
+                border-bottom: 1px solid $dark-font-color;
+                display: block;
+                padding: 6px;
+            }
+        }
     }
 
-    .tableShadowbox td {
-        border-bottom: 1px solid $dark-font-color;
-        display: block;
-        padding: 6px;
-    }
 }
 
 // Dark Theme override here
@@ -224,8 +225,12 @@ h2 {
     }
 
     @media (max-width: 550px) {
-        tbody .shadow-box {
+        .table-shadow-box {
-            background-color: $dark-bg2;
+            tbody {
+                .shadow-box {
+                    background-color: $dark-bg2;
+                }
+            }
         }
     }
 }

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>