Merge pull request #3817 from tidusjar/discovery-layout-selection

what do you think?

src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html

@@ -1,13 +1,13 @@
 <div class="small-middle-container">
     <div class="row justify-content-end">
-        <div class="btn-group col-12 col-md-3 small-space" style="float:left;" role="group">
+        <div class="btn-group col-12 col-md-3 small-space discover-layout"role="group">
             <mat-button-toggle-group *ngIf="displayOption">
                 <mat-button-toggle [ngClass]="displayOption === DisplayOption.Card ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.Card)"><mat-icon>dashboard</mat-icon></mat-button-toggle>
                 <mat-button-toggle [ngClass]="displayOption === DisplayOption.List ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.List)"><mat-icon>calendar_view_day</mat-icon></mat-button-toggle>
               </mat-button-toggle-group>
         </div>
     </div>
-    <div class="row justify-content-md-center">
+    <div class="row justify-content-md-center small-space">
         <div class="btn-group" role="group">
             <button type="button" (click)="switchDiscoverMode(DiscoverOption.Movie)" [attr.color]="popularActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Movie ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Discovery.Movies' | translate}}</button>
             <button type="button" (click)="switchDiscoverMode(DiscoverOption.Combined)" [attr.color]="trendingActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Combined ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow"
@@ -39,4 +39,4 @@
     <div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
         <mat-spinner [color]="'accent'"></mat-spinner>
     </div>
-</div>
+</div>

src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss

@@ -26,6 +26,13 @@
     padding-top: 1%;
 }
 
+.discover-layout {
+    position: absolute;
+    float: right;
+    margin-right: 36px;
+    z-index: 1;
+}
+
 ::ng-deep .mat-card-image {
     height: 75%;
     object-fit: cover;
@@ -195,4 +202,9 @@
         max-width: 11.111111%;
         min-width: 11.111111%;
     }
+}
+@media (max-width: 420px) {
+    .discover-layout{
+        display: none;
+    }
 }