Fix campaign nav header chevron positioning and sass

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,
   "scripts": {

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html

@@ -1,12 +1,11 @@
-<div *ngIf="!isSmallLayout">
-  <div class="scroll-btn"
+<div class="campaign-horizontal-list" #horizontalList *ngIf="!isSmallLayout">
+  <div class="scroll-btn-left"
        *ngIf="isLeftScrollVisible"
        (mouseenter)="setRepeater(-10)"
        (mouseleave)="clearRepeater()">
     <mat-icon svgIcon="chevron-left"></mat-icon>
   </div>
 
-  <div class="campaign-horizontal-list" #horizontalList>
   <div class="campaign-entry"
        [ngClass]="{active : selectedCampaignId === 'all'}"
        (click)="select({_id:'all'})">
@@ -37,9 +36,8 @@
       </mat-menu>
     </span>
   </div>
-  </div>
 
-  <div class="scroll-btn scroll-btn-right"
+  <div class="scroll-btn-right"
        *ngIf="isRightScrollVisible"
        (mouseenter)="setRepeater(10)"
        (mouseleave)="clearRepeater()">

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

@@ -1,20 +1,3 @@
-.scroll-btn {
-  position: absolute;
-  height: 46px;
-  width: 32px;
-  cursor: pointer;
-}
-
-.scroll-btn-right {
-  top: 0;
-  left: calc(100vw - 50px);
-}
-
-.scroll-btn mat-icon {
-  height: 46px;
-  width: 28px;
-}
-
 .campaign-horizontal-list {
   width: 100%;
   height: 100%;
@@ -23,6 +6,23 @@
   padding: 0;
   overflow: hidden;
   box-shadow: #666666 1px 1px 4px;
+
+  .scroll-btn-left {
+    position: absolute;
+    height: 46px;
+    width: 32px;
+    cursor: pointer;
+
+    mat-icon {
+      height: 46px;
+      width: 28px;
+    }
+  }
+
+  .scroll-btn-right {
+    @extend .scroll-btn-left;
+    top: 0;
+    left: calc(100vw - 32px);
   }
 
   .campaign-entry {
@@ -36,16 +36,17 @@
     float: left;
     background: #424242;
     color: #9d9d9d;
+
+    &:hover {
+      border-bottom: 3px solid #ffd740;
     }
 
-.active {
+    &.active {
       background: #222222;
       color: white;
       border-bottom: 3px solid #ffd740;
     }
-
-.campaign-entry:hover {
-  border-bottom: 3px solid #ffd740;
+  }
 }
 
 .campaign-select-small {