Improve responsive layout

static/src/app/app.component.html

@@ -14,7 +14,7 @@
     </mat-sidenav>
   </mat-sidenav-container>
 
-  <div (click)="sidenav.close()">
+  <div style="overflow-x: auto;position: relative;min-height: calc(100vh - 50px);" (click)="sidenav.close()">
     <router-outlet></router-outlet>
     <div id="left">
       <router-outlet name="left"></router-outlet>

static/src/app/army/army-squad/army-squad.component.scss

@@ -10,6 +10,7 @@
 
   img {
     right: 3vw;
+    max-width: 27%;
   }
 
   div.name-cell {

static/src/app/army/army.component.scss

@@ -22,12 +22,13 @@
 
     h3 {
       background: #222;
+      font-size: 18px;
       margin: 0.2em 0;
       padding: 1.5vh 0;
 
       button {
         position: absolute;
-        margin-top: -7px;
+        margin-top: -10px;
         display: inline-block;
 
         &.switch-btn-blufor {
@@ -40,8 +41,8 @@
         }
 
         mat-icon {
-          width: 3em;
-          height: 3em;
+          width: 2.5em;
+          height: 2.5em;
         }
       }
     }

static/src/app/pub/rank-overview/rank-overview.component.scss

@@ -39,12 +39,9 @@
   td > img {
     height: 13vh !important;
     max-height: 120px;
+    max-width: 100%;
     padding: 4px;
   }
-
-  :host {
-    margin-bottom: -50vh;
-  }
 }
 
 table {

static/src/app/statistic/stats.component.html

@@ -1,9 +1,11 @@
-<campaign-navigation
-  [selectedCampaignId]="selectedCampaign._id"
-  (campaignSelect)="switchCampaign($event)"
-  (campaignEdit)="editCampaign($event)"
-  (campaignDelete)="deleteCampaign($event)">
-</campaign-navigation>
+<div>
+  <campaign-navigation
+    [selectedCampaignId]="selectedCampaign._id"
+    (campaignSelect)="switchCampaign($event)"
+    (campaignEdit)="editCampaign($event)"
+    (campaignDelete)="deleteCampaign($event)">
+  </campaign-navigation>
+</div>
 
 <div class="side-bar"
      [ngClass]="{collapsed: collapsed}"