better support for mobile devices

src/components/FlashChart.vue

@@ -1,14 +1,9 @@
 <template>
-  <h3 class="text-center col-12 mt-3">Flash-Duration <small class="text-muted">(in s)</small></h3>
   <div class="player-flash">
-    <div class="team-1 mx-5">
-      <h4 class="text-center mt-3 mb-3">Team 1</h4>
-      <div id="flash-chart-1"></div>
-    </div>
-    <div class="team-2 mx-5">
-      <h4 class="text-center mt-3 mb-3">Team 2</h4>
-      <div id="flash-chart-2"></div>
-    </div>
+    <h3>Flash-Duration <small class="text-muted">(in s)</small></h3>
+    <div class="flexbreak"></div>
+    <div id="flash-chart-1"></div>
+    <div id="flash-chart-2"></div>
   </div>
 </template>
 
@@ -112,64 +107,38 @@ export default {
 
 <style lang="scss" scoped>
 .player-flash {
-  flex-direction: column;
-  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
 
-  h4 {
-    margin-top: 7px;
-    color: cornflowerblue;
+  .flexbreak {
+    flex-basis: 100%;
+    height: 0;
+  }
+
+  h3 {
+    margin: 1rem auto -1rem;
+  }
+
+  #flash-chart-1,
+  #flash-chart-2 {
+    flex-basis: 50%;
   }
 }
 
-@media screen and (max-width: 768px) {
-  .player-dmg {
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    transform: scale(.7);
-    margin-top: -100px;
+@media (max-width: 1200px) {
+  .player-flash {
+    display: grid;
+    grid-template-columns: minmax(1rem, 1fr) 2fr minmax(1rem, 1fr);
+    margin-bottom: 1rem;
 
-    .team-1 {
-      margin-top: -50px;
+    & > * {
+      grid-column: 1 / -1;
     }
 
-    .team-2 {
-      margin-bottom: -100px;
-      margin-left: -60px;
-    }
-  }
-}
-
-@media screen and (max-width: 991px) and (min-width: 678px) {
-  .player-dmg {
-    flex-wrap: nowrap;
-    transform: scale(.8);
-    margin-top: -50px;
-    margin-left: -60px;
-
-    .team-1 {
-      margin-left: 0;
-    }
-
-    .team-2 {
-      margin-bottom: -100px;
-    }
-  }
-}
-
-@media screen and (max-width: 1261px) and (min-width: 991px) {
-  .player-dmg {
-    flex-wrap: nowrap;
-    transform: scale(.9);
-    margin-top: -30px;
-    margin-left: -60px;
-
-    .team-1 {
-      margin-left: 0;
-    }
-
-    .team-2 {
-      margin-bottom: -100px;
+    #flash-chart-1,
+    #flash-chart-2 {
+      overflow: scroll;
     }
   }
 }