Fix search bar overlap on mobile

src/Ombi/ClientApp/app/search/moviesearch.component.html

@@ -1,30 +1,41 @@
 <!-- Movie tab -->
 <div role="tabpanel" class="tab-pane active" id="MoviesTab">
 
-    <div class="input-group search-bar-background">
+    <ng-template #FilterRef>
-        <input id="search" type="text" placeholder="{{ 'Search.SearchBarPlaceholder' | translate}}" class="form-control form-control-custom form-control-search form-control-withbuttons"
+        <div class="btn-group" role="group">
-            (keyup)="search($event)">
+            <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-        <div class="input-group-addon right-radius">
+                {{ 'Search.Suggestions' | translate }}
-            <div class="btn-group" role="group">
+                <i class="fa fa-chevron-down"></i>
-                <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+            </a>
-                    {{ 'Search.Suggestions' | translate }}
+            <ul class="dropdown-menu">
-                    <i class="fa fa-chevron-down"></i>
+                <li><a (click)="popularMovies()" [translate]="'Search.Movies.PopularMovies'"></a></li>
-                </a>
+                <li><a (click)="upcomingMovies()" [translate]="'Search.Movies.UpcomingMovies'"></a></li>
-                <ul class="dropdown-menu">
+                <li><a (click)="topRatedMovies()" [translate]="'Search.Movies.TopRatedMovies'"></a></li>
-                    <li><a (click)="popularMovies()" [translate]="'Search.Movies.PopularMovies'"></a></li>
+                <li><a (click)="nowPlayingMovies()" [translate]="'Search.Movies.NowPlayingMovies'"></a></li>
-                    <li><a (click)="upcomingMovies()" [translate]="'Search.Movies.UpcomingMovies'"></a></li>
+            </ul>
-                    <li><a (click)="topRatedMovies()" [translate]="'Search.Movies.TopRatedMovies'"></a></li>
+            <button class="btn btn-sm btn-primary-outline" (click)="refineOpen()">
-                    <li><a (click)="nowPlayingMovies()" [translate]="'Search.Movies.NowPlayingMovies'"></a></li>
+                {{ 'Search.Refine' | translate }}
-                </ul>
+                <i class="fa" [ngClass]="{'fa-chevron-down': !refineSearchEnabled, 'fa-chevron-up': refineSearchEnabled}"></i>
-                <button class="btn btn-sm btn-primary-outline" (click)="refineOpen()">
+            </button>
-                    {{ 'Search.Refine' | translate }}
+        </div>
-                    <i class="fa" [ngClass]="{'fa-chevron-down': !refineSearchEnabled, 'fa-chevron-up': refineSearchEnabled}"></i>
+    </ng-template>
-                </button>
-            </div>
 
+    <div class="input-group search-bar-background">
+        <input id="search" type="text" placeholder="{{ 'Search.SearchBarPlaceholder' | translate}}"
+               class="form-control form-control-custom form-control-search form-control-withbuttons"
+               (keyup)="search($event)">
+        <div class="input-group-addon right-radius">
+            <div class="search-button-container-inline">
+                <ng-template [ngTemplateOutlet]="FilterRef"></ng-template>
+            </div>
             <i class="fa fa-search"></i>
         </div>
     </div>
+
+    <div class="row search-button-container">
+        <ng-template [ngTemplateOutlet]="FilterRef"></ng-template>
+    </div>
+
     <!-- Refine search options -->
     <div class="row top-spacing form-group vcenter" *ngIf="refineSearchEnabled">
         <div class="col-md-1">

src/Ombi/ClientApp/app/search/search.component.scss

@@ -3,7 +3,7 @@
         padding-top: 5%
     }    
     .form-control-search {
-        width: 77%;
+        padding-right: 165px;
     }
 
 }

src/Ombi/ClientApp/app/search/tvsearch.component.html

@@ -1,32 +1,44 @@
 <!-- Movie tab -->
 <div role="tabpanel" class="tab-pane" id="TvShowTab">
+    <ng-template #FilterRef>
+        <div class="btn-group" role="group">
+            <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+                {{ 'Search.Suggestions' | translate }}
+                <i class="fa fa-chevron-down"></i>
+            </a>
+            <ul class="dropdown-menu">
+                <li>
+                    <a (click)="popularShows()">{{ 'Search.TvShows.Popular' | translate }} </a>
+                </li>
+                <li>
+                    <a (click)="trendingShows()">{{ 'Search.TvShows.Trending' | translate }}</a>
+                </li>
+                <li>
+                    <a (click)="mostWatchedShows()">{{ 'Search.TvShows.MostWatched' | translate }}</a>
+                </li>
+                <li>
+                    <a (click)="anticipatedShows()">{{ 'Search.TvShows.MostAnticipated' | translate }}</a>
+                </li>
+            </ul>
+        </div>
+    </ng-template>
+
     <div class="input-group">
-        <input id="search" type="text" placeholder="{{ 'Search.SearchBarPlaceholder' | translate }}" class="form-control form-control-custom form-control-search form-control-withbuttons" (keyup)="search($event)">
+        <input id="search" type="text" placeholder="{{ 'Search.SearchBarPlaceholder' | translate }}"
+               class="form-control form-control-custom form-control-search form-control-withbuttons"
+               (keyup)="search($event)">
         <div class="input-group-addon right-radius">
-            <div class="btn-group">
+            <div class="search-button-container-inline">
-                <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+                <ng-template [ngTemplateOutlet]="FilterRef"></ng-template>
-                    {{ 'Search.Suggestions' | translate }}
-                    <i class="fa fa-chevron-down"></i>
-                </a>
-                <ul class="dropdown-menu">
-                    <li>
-                        <a (click)="popularShows()">{{ 'Search.TvShows.Popular' | translate }} </a>
-                    </li>
-                    <li>
-                        <a (click)="trendingShows()">{{ 'Search.TvShows.Trending' | translate }}</a>
-                    </li>
-                    <li>
-                        <a (click)="mostWatchedShows()">{{ 'Search.TvShows.MostWatched' | translate }}</a>
-                    </li>
-                    <li>
-                        <a (click)="anticipatedShows()">{{ 'Search.TvShows.MostAnticipated' | translate }}</a>
-                    </li>
-                </ul>
             </div>
             <i id="tvSearchButton" class="fa fa-search"></i>
         </div>
     </div>
 
+    <div class="row search-button-container">
+        <ng-template [ngTemplateOutlet]="FilterRef"></ng-template>
+    </div>
+
     <remaining-requests [tv]="true" [quotaRefreshEvents]="tvRequested.asObservable()" #remainingTvShows></remaining-requests>
 
     <!-- Movie content -->
@@ -159,6 +171,7 @@
                 <br/>
                 <br/>
             </div>
+        </div>
     </div>
 </div>
 

src/Ombi/ClientApp/styles/base.scss

@@ -389,6 +389,27 @@ $border-radius: 10px;
     padding-right: 105px;
 }
 
+.search-button-container {
+    margin-top: 10px;
+    text-align: center;
+}
+
+@media (max-width: 450px) {
+    .form-control-search {
+        padding-right: 0 !important;
+    }
+
+    .search-button-container-inline {
+        display: none;
+    }
+}
+
+@media (min-width: 450px) {
+    .search-button-container {
+        display: none;
+    }
+}
+
 .input-group-addon .btn-group {
     position: absolute;
     right: 45px;