From b3d49d0e07ed3db1b4f006761bae89f288ae99a9 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 23 Feb 2019 23:36:25 -0500
Subject: [PATCH] fix search panel not displaying scroll bar when needed

---
 .../search/search.component.html              | 63 ++++++++++---------
 .../search/search.component.scss              | 41 +++++++-----
 src/sass/_panel.scss                          |  1 +
 3 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/src/app/components/floating-column/search/search.component.html b/src/app/components/floating-column/search/search.component.html
index 19247483..1b0257e0 100644
--- a/src/app/components/floating-column/search/search.component.html
+++ b/src/app/components/floating-column/search/search.component.html
@@ -1,39 +1,44 @@
 <div class="panel">
-    <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" />
-        <button class="form-button" type="submit" title="search">GO</button>
-    </form>
+    <div class="search-result-form">
+        <h3 class="panel__title">search</h3>
 
-    <app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
-
-    <div *ngIf="accounts.length > 0" class="search-results">
-        <h3 class="search-results__title">Accounts</h3>
-        <a href *ngFor="let account of accounts" class="account" title="open account" 
-            (click)="browseAccount(account.acct)">
-            <img src="{{account.avatar}}" class="account__avatar" />
-            <div class="account__name">{{ account.username }}</div>
-            <div class="account__fullhandle">@{{ account.acct }}</div>
-        </a>
+        <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" />
+            <button class="form-button" type="submit" title="search">GO</button>
+        </form>
     </div>
 
-    <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">
-            #{{ hashtag }}
-        </a>
-    </div>   
+    <div class="search-result-display flexcroll">
+        <app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
 
-    <div *ngIf="statuses.length > 0" class="search-results">
-        <h3 class="search-results__title">Statuses</h3>
+        <div *ngIf="accounts.length > 0" class="search-results">
+            <h3 class="search-results__title">Accounts</h3>
+            <a href *ngFor="let account of accounts" class="account" title="open account"
+                (click)="browseAccount(account.acct)">
+                <img src="{{account.avatar}}" class="account__avatar" />
+                <div class="account__name">{{ account.username }}</div>
+                <div class="account__fullhandle">@{{ account.acct }}</div>
+            </a>
+        </div>
 
-        <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>
+        <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">
+                #{{ hashtag }}
+            </a>
+        </div>
+
+        <div *ngIf="statuses.length > 0" class="search-results">
+            <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>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/floating-column/search/search.component.scss b/src/app/components/floating-column/search/search.component.scss
index 182c7275..2dd533dc 100644
--- a/src/app/components/floating-column/search/search.component.scss
+++ b/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,19 +61,16 @@
         padding: 5px;
         color: white;
         text-decoration: none;
-
-        transition: all .3s;        
+        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 {        
+    &__status {
         font-size: 15px;
         border-top: 1px solid $separator-color;
         &:last-of-type {
@@ -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,
     &:hover &__fullhandle {
         color: white;
         text-decoration: none;
         background-color: $button-background-color-hover;
     }
-
     @include clearfix;
 }
\ No newline at end of file
diff --git a/src/sass/_panel.scss b/src/sass/_panel.scss
index 81ab3028..fea13ac0 100644
--- a/src/sass/_panel.scss
+++ b/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;