fix search panel not displaying scroll bar when needed

src/app/components/floating-column/search/search.component.html

@@ -1,12 +1,16 @@
 <div class="panel">
+
+    <div class="search-result-form">
         <h3 class="panel__title">search</h3>
 
         <form class="form-section" (ngSubmit)="onSubmit()">
-        <input type="text" class="form-control form-control-sm form-with-button" [(ngModel)]="searchHandle" name="searchHandle"
-            placeholder="Search" autocomplete="off" />
+            <input type="text" class="form-control form-control-sm form-with-button" [(ngModel)]="searchHandle"
+                name="searchHandle" placeholder="Search" autocomplete="off" />
             <button class="form-button" type="submit" title="search">GO</button>
         </form>
+    </div>
 
+    <div class="search-result-display flexcroll">
         <app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
 
         <div *ngIf="accounts.length > 0" class="search-results">
@@ -21,7 +25,8 @@
 
         <div *ngIf="hashtags.length > 0" class="search-results">
             <h3 class="search-results__title">Hashtags</h3>
-        <a (click)="browseHashtag(hashtag)" href *ngFor="let hashtag of hashtags" class="search-results__hashtag" title="browse hashtag">
+            <a (click)="browseHashtag(hashtag)" href *ngFor="let hashtag of hashtags" class="search-results__hashtag"
+                title="browse hashtag">
                 #{{ hashtag }}
             </a>
         </div>
@@ -30,10 +35,10 @@
             <h3 class="search-results__title">Statuses</h3>
 
             <div class="search-results__status" *ngFor="let statusWrapper of statuses">
-            <app-status [statusWrapper]="statusWrapper" 
-                (browseAccountEvent)="browseAccount($event)" 
-                (browseHashtagEvent)="browseHashtag($event)"
-                (browseThreadEvent)="browseThread($event)"></app-status>
+                <app-status [statusWrapper]="statusWrapper" (browseAccountEvent)="browseAccount($event)"
+                    (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
+                </app-status>
+            </div>
         </div>
     </div>
 </div>

src/app/components/floating-column/search/search.component.scss

@@ -2,7 +2,10 @@
 @import "mixins";
 @import "panel";
 @import "commons";
-
+.panel {
+    padding-left: 0px;
+    padding-right: 0px;
+}
 
 .form-section {
     overflow: auto;
@@ -29,10 +32,24 @@
     }
 }
 
+$search-form-height: 70px;
+.search-result-form {
+    height: $search-form-height;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-bottom: 1px solid #222736;
+}
+
+.search-result-display {
+    overflow: auto;
+    height: calc(100% - #{$search-form-height});
+}
+
 .search-results {
     // outline: 1px solid greenyellow;
     margin-top: 10px; // &:first-of-type{
-    //     margin-top: 10px;
+    padding-left: 10px; //     margin-top: 10px;
+    padding-right: 10px; //     margin-top: 10px;
     // }
     &__title {
         text-transform: uppercase;
@@ -44,18 +61,15 @@
         padding: 5px;
         color: white;
         text-decoration: none;
-
         transition: all .3s;
         &:hover {
             background-color: $button-background-color-hover;
         }
-
         border-top: 1px solid $separator-color;
         &:last-of-type {
             border-bottom: 1px solid $separator-color;
         }
     }
-
     &__status {
         font-size: 15px;
         border-top: 1px solid $separator-color;
@@ -68,12 +82,8 @@
 .account {
     display: block;
     color: white;
-
     border-radius: 2px;
-    transition: all .3s;    
-
-   
-    // &:hover &__name {
+    transition: all .3s; // &:hover &__name {
     //     text-decoration: underline;
     // }
     border-top: 1px solid $separator-color;
@@ -92,18 +102,15 @@
     &__fullhandle {
         margin: 0 0 5px 0;
         color: $status-secondary-color;
-        transition: all .3s;
-        // &:hover {
+        transition: all .3s; // &:hover {
         //     color: white;
         // }
     }
-
     &:hover,
     &:hover &__fullhandle {
         color: white;
         text-decoration: none;
         background-color: $button-background-color-hover;
     }
-
     @include clearfix;
 }

src/sass/_panel.scss

@@ -5,6 +5,7 @@
     padding: 10px 10px 0 7px;
     font-size: $small-font-size;
     white-space: normal;
+    // overflow: auto;
     &__title {
         font-size: 13px;
         text-transform: uppercase;