Improve fraction stats and war header mobile display

static/src/app/statistic/campaign/overview/campaign-overview.component.scss

@@ -10,6 +10,7 @@
   .slide-chart-container {
     width: 100%;
     min-width: unset;
+    height: 65vh;
     margin-top: 105px;
     margin-bottom: 35px;
   }

static/src/app/statistic/war/fraction-stats/fraction-stats.component.html

@@ -1,5 +1,4 @@
-<div class="fade-in" style="border-top: 1px solid #dadada; padding-top:25px;" xmlns="http://www.w3.org/1999/html">
+<div class="fade-in fraction-stats-container">
-
   <mat-button-toggle-group class="chart-select-group"
                            #group="matButtonToggleGroup"
                            [(ngModel)]="activeChartSelect"

static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss

@@ -1,6 +1,11 @@
 @import url('../../../style/list-entry.scss');
 @import url('../../../style/hide-scrollbar.scss');
 
+.fraction-stats-container {
+  border-top: 1px solid #dadada;
+  padding-top: 25px;
+}
+
 .chart-select-group {
   display: flex;
   width: fit-content;
@@ -40,16 +45,29 @@
 }
 
 @media all and (max-width: 959px) {
+  .fraction-stats-container {
+    width: 93%;
+    margin: auto;
+  }
+
   .chart-container {
-    width: 150%;
+    width: 100%;
     min-width: 0;
-    height: 70vh
+    padding: 0;
+    margin: 10px 0 0;
   }
 
   .chart-select-group {
-    background: #dadada;
-    max-width: fit-content;
-    width: 200%;
     flex-wrap: wrap;
   }
+
+  mat-button-toggle.mat-button-toggle {
+    width: 50%;
+    border: 1px solid #dadada;
+    text-align: center;
+
+    & /deep/ button.mat-button-toggle-button, & /deep/ div.mat-button-toggle-label-content {
+      width: 100%;
+    }
+  }
 }

static/src/app/statistic/war/scoreboard/scoreboard.component.scss

@@ -43,13 +43,10 @@ mat-table.mat-table {
   }
 }
 
-
 @media all and (max-width: 599px) {
   .mat-column-name {
     flex: 0 0 130px;
     padding-left: 1vw;
-    word-wrap: break-word;
-    white-space: pre-wrap;
   }
 
   .mat-header-row {
@@ -58,6 +55,7 @@ mat-table.mat-table {
 
   mat-table.mat-table {
     width: 100%;
+    height: 50vh;
     overflow-x: auto;
     display: grid;
   }

static/src/app/statistic/war/war-header/war-header.component.html

@@ -9,7 +9,16 @@
             style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
     </div>
 
-    <div class="pull-left head-field-pie-chart">
+    <div class="pull-left head-field" style="margin-top:0" *ngIf="isSmallLayout">
+      <h4>{{'stats.scoreboard.participants' | translate}}</h4>
+      <span [style.color]="fraction.COLOR_BLUFOR"
+            style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.playersBlufor}}</span>
+      <span style="font-size: 13px;font-weight: bold;">vs</span>
+      <span [style.color]="fraction.COLOR_OPFOR"
+            style="font-weight: bold; margin-left: 10px;">{{war.playersOpfor}} {{fraction.OPFOR}}</span>
+    </div>
+
+    <div class="pull-left head-field-pie-chart" *ngIf="!isSmallLayout">
       <h4 class="pull-left" style="margin-bottom: 0;">{{'stats.scoreboard.participants' | translate}}</h4>
       <ngx-charts-pie-chart
         class="pull-left"

static/src/app/statistic/war/war-header/war-header.component.scss

@@ -145,11 +145,12 @@ span.tab-control {
     }
 
     div.btn-clean-log {
-      padding-left: 0;
+      padding: 2vw 4vw 38px;
-      padding-top: 38px;
+      width: 100%;
 
       & > a {
         margin: 0 !important;
+        width:100%;
       }
     }
   }
@@ -165,12 +166,6 @@ span.tab-control {
     }
   }
 
-  .head-field-pie-chart {
-    width: calc(54% - 1.5vw);
-    padding-left: 10%;
-    margin-bottom: -8px;
-  }
-
   .nav-tabs > li {
     width: 25%;
     font-size: 12px;
@@ -184,7 +179,7 @@ span.tab-control {
   .nav-tabs > li:last-child {
     width: fit-content;
     position: absolute;
-    margin-top: -48px;
+    margin-top: -38px;
-    margin-left: 46%;
+    margin-left: 27%;
   }
 }