fixed search field

src/app/components/search/search.component.html

@@ -3,8 +3,11 @@
     <mat-card >      
         <mat-card-content>
         <mat-form-field id="input">
-          <textarea matInput #searchWord type="search" mat-autosize="false" matAutosizeMaxRows="1" placeholder="search something" 
-          [ngModel]="searchWord"
+          <textarea matInput #searchWord type="search" 
+          mat-autosize="false" 
+          matAutosizeMaxRows="1" 
+          placeholder="search something" 
+          [ngModel]="searchWord.value"
           (ngModelChange)="search(searchWord.value)"></textarea>
           <button mat-button matSuffix mat-icon-button>
             <mat-icon>search </mat-icon>

src/app/components/search/search.component.ts

@@ -11,7 +11,7 @@ import { Router } from '@angular/router';
   styleUrls: ['./search.component.sass']
 })
 export class SearchComponent implements OnInit {
-  searchValue: string;
+  searchValue = ' ';
   category = 'username';
   foundUsers: Array<User>;
 

src/app/components/social/social.component.html

@@ -1,17 +1,23 @@
-<mat-tab-group id="tab-group" selectedIndex="0" mat-stretch-tabs>
-    <mat-tab>    
-        <ng-template mat-tab-label>
-            <mat-icon>people</mat-icon>
-        </ng-template> 
-        <social-friends id="friendscontainer"></social-friends>
-        <social-groups id="groupscontainer"></social-groups>
-    </mat-tab>
-    <mat-tab>    
-        <ng-template mat-tab-label>
-            <mat-icon>search</mat-icon>
-        </ng-template> 
-        <home-search class="tab-content"></home-search>
-    </mat-tab>
-</mat-tab-group>
+<div id="content" fxShow="true" fxHide.lt-md="true">
+    <mat-tab-group selectedIndex="0" mat-stretch-tabs>
+        <mat-tab>    
+            <ng-template mat-tab-label>
+                <mat-icon>people</mat-icon>
+            </ng-template> 
+            <social-friends id="friendscontainer"></social-friends>
+            <social-groups id="groupscontainer"></social-groups>
+        </mat-tab>
+        <mat-tab>    
+            <ng-template mat-tab-label>
+                <mat-icon>search</mat-icon>
+            </ng-template> 
+            <home-search class="tab-content"></home-search>
+        </mat-tab>
+    </mat-tab-group>
+</div>
+<div fxShow="true" fxHide.gt-sm="true">
+    <social-friends id="friendscontainer"></social-friends>
+    <social-groups id="groupscontainer"></social-groups>
+</div>