fix(table): results overlap with search bar (#676)

* hides result count * search bar on left * 100% width * no spacer
T-Systems-MMS · May 28, 2020 · 5d2d686 · 5d2d686
1 parent 736a583
commit 5d2d686
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 31 deletions.
diff --git a/Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.html b/Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.html
@@ -239,9 +239,12 @@
           </mat-toolbar-row>
           <mat-toolbar-row>
             <div class="row-toolbar">
-              <app-search id="search"></app-search>
+              <app-search id="search"> </app-search>
               <div class="table-settings" *ngIf="displayTableSettings">
-                <span class="mat-h4" i18n="TableComponent|Result Count@@TableComponentResultCount">
+                <span
+                  class="mat-h4 pb-hide-below-med"
+                  i18n="TableComponent|Result Count@@TableComponentResultCount"
+                >
                   {{ tableResultCount$ | async }} Results
                 </span>
                 <button mat-icon-button (click)="openSettings()">

diff --git a/Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.scss b/Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.scss
@@ -38,9 +38,6 @@ mat-sidenav-container {
       }
 
       .table-settings {
-        position: absolute;
-        right: 0;
-        margin-right: 16px;
         vertical-align: middle;
       }
 
@@ -52,8 +49,9 @@ mat-sidenav-container {
       }
 
       #search {
-        margin: auto;
+        margin: 0 16px;
         height: 3rem;
+        width: 100%;
       }
 
       .pb-missing-userimage-info {
@@ -86,28 +84,3 @@ mat-sidenav-container {
   margin-right: 16px;
   vertical-align: middle;
 }
-// Dynamic Search Bar Width
-
-@include smaller {
-  #search {
-    width: 100%;
-  }
-}
-
-@include small-med {
-  #search {
-    width: 85%;
-  }
-}
-
-@include med-big {
-  #search {
-    width: 70%;
-  }
-}
-
-@include bigger {
-  #search {
-    width: 63%;
-  }
-}
diff --git a/Phonebook.Frontend/src/app/shared/components/search/search.component.scss b/Phonebook.Frontend/src/app/shared/components/search/search.component.scss
@@ -16,6 +16,7 @@ input {
   box-shadow: none;
   box-sizing: content-box;
   transition: all 0.3s;
+  min-width: 0px;
 
   &:focus {
     border-bottom: none !important;