tabs in social container adapt to width now, too long usernames are cut

src/app/components/home/home.component.html

@@ -1,7 +1,8 @@
 <div id="content" fxShow="true" fxHide.lt-md="true">
-    <div id="chat"><home-chatmanager id="chatcontainer" [hidden]="!loggedIn"></home-chatmanager></div>
-    <div id="feed"><home-feed id="feedcontainer"></home-feed></div>
-    <div id="social"><home-social id="socialcontainer" [hidden]="!loggedIn"></home-social></div>
+    <div id="chat"><home-chatmanager [hidden]="!loggedIn"></home-chatmanager></div>
+    <div id="feed"><home-feed></home-feed></div>
+    <div class="social" [hidden]="!loggedIn"><home-social></home-social></div>
+    <div class="social" [hidden]="loggedIn"><home-search></home-search></div>
 </div>
 <!--
 <mat-tab-group headerPosition="below" position="0" id="bottom-menu" fxShow="true" fxHide.gt-sm="true">

src/app/components/home/home.component.sass

@@ -20,7 +20,7 @@
   float: left	
   overflow-y: auto	
 
-#social	
+.social	
   box-sizing: content-box	
   height: 100%	
   width: 25%	

src/app/components/search/search.component.sass

@@ -22,9 +22,14 @@
   margin-top: 0.5em
   /deep/ .mat-card-header-text
     width: 1000%
+    margin: 0
+    margin-left: 16px
   .mat-card-subtitle
     margin: 0
     word-break: break-all
+  .mat-card-title
+    margin: 0
+    word-break: break-all
   .request-button
     margin-top: 0.5em
     margin-bottom: 0.5em

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

@@ -1,5 +1,5 @@
 <div id="content" fxShow="true" fxHide.lt-md="true">
-    <mat-tab-group selectedIndex="0" mat-stretch-tabs>
+    <mat-tab-group selectedIndex="0" mat-stretch-tabs id="tabs">
         <mat-tab>    
             <ng-template mat-tab-label>
                 <mat-icon>people</mat-icon>

src/app/components/social/social.component.sass

@@ -12,3 +12,7 @@
   height: 50%
   width: 100%
   overflow: auto
+
+#tabs
+  /deep/ .mat-tab-label
+    min-width: 50px