Improve search UI for different screen widths

src/main/webapp/app/mock-search/mock-search.component.html

@@ -5,13 +5,13 @@
      (scrolled)="onScroll()">
 
     <jhi-search-input
-        class="col-md-6 col-lg-4 col-xl-3"
+        class="col-12 col-md-6 col-lg-4 col-xl-3"
         (searchInputEvent)="updateSearchInput($event)">
     </jhi-search-input>
-    <div class="col-md-6 col-lg-8 col-xl-9">
+    <div class="col-12 col-md-6 col-lg-8 col-xl-9">
         <div class="row">
             <jhi-exercise-card *ngFor="let result of results"
-                               class="card-container col-md-12 col-lg-6 col-xl-4"
+                               class="card-container col-12 col-lg-6 col-xl-4"
                                [exercise]="result"
                                (exerciseSelectionEvent)="selectExercise($event)">
             </jhi-exercise-card>

src/main/webapp/app/search-input/search-input.component.html

 <div class="card-container">
-    <div style="float: left; width: 100%; position: relative;">
-        <h2 class="display-4" style="float: left;" jhiTranslate="search.title">Welcome!</h2>
+    <h2 class="display-4" style="float: left; width: 100%;" jhiTranslate="search.title">Welcome!</h2>
+    <div style="width: 100%; margin-bottom: 20px;">
         <button type="button"
-                class="btn btn-outline-secondary" style="float: right; margin-top: auto; position: absolute;
-  top: 1.2rem; right: 0;"
-             (click)="showSearchUsage = !showSearchUsage"
+                class="btn btn-outline-secondary"
+                (click)="showSearchUsage = !showSearchUsage"
         >{{ (showSearchUsage ? 'search.hideUsage' : 'search.showUsage') | translate}}</button>
     </div>