better support for mobile devices

src/components/DamageChart.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="player-dmg">
-    <h4 class="text-center mt-3 mb-3">Team 1</h4>
     <div id="dmg-chart-1"></div>
     <hr>
-    <h4 class="text-center mt-3 mb-3">Team 2</h4>
     <div id="dmg-chart-2"></div>
   </div>
 </template>
@@ -57,7 +55,8 @@ export default {
         },
         xAxis: [
           {
-            type: 'value'
+            type: 'value',
+            min: -300
           }
         ],
         yAxis: [
@@ -124,13 +123,25 @@ export default {
 
 <style lang="scss" scoped>
 .player-dmg {
-  flex-direction: column;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 1rem 1fr 1rem;
+  margin-bottom: 1rem;
+  margin-top: 40px;
+
+  & > * {
+    grid-column: 1 / -1;
+  }
+
+  #dmg-chart-1,
+  #dmg-chart-2 {
+    margin-top: -40px;
+  }
 }
 
-@for $i from 0 through 9 {
-  #dmg-chart-#{$i} {
-    margin: -50px 0 0 0;
+@media (max-width: 1200px) {
+  #dmg-chart-1,
+  #dmg-chart-2 {
+    overflow: scroll;
   }
 }
 </style>