Change styling to always have scrollbar on search results

2 files changed, 48 insertions, 37 deletions

diff --git a/app/javascript/flavours/glitch/features/compose/components/search_results.js b/app/javascript/flavours/glitch/features/compose/components/search_results.js
index fa3487328..bbf997c1f 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search_results.js
+++ b/app/javascript/flavours/glitch/features/compose/components/search_results.js
@@ -125,9 +125,11 @@ class SearchResults extends ImmutablePureComponent {
           <FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} />
         </header>
 
-        {accounts}
-        {statuses}
-        {hashtags}
+        <div className='search-results__contents'>
+          {accounts}
+          {statuses}
+          {hashtags}
+        </div>
       </div>
     );
   };
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index d5463e406..fa410234a 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -115,8 +115,10 @@
 
 .drawer--results {
   background: $ui-base-color;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
 
   & > header {
     color: $dark-text-color;
@@ -125,6 +127,7 @@
     font-weight: 500;
     font-size: 16px;
     cursor: default;
+    flex: 0 0 auto;
 
     .fa {
       display: inline-block;
@@ -132,41 +135,47 @@
     }
   }
 
-  & > section {
-    margin-bottom: 5px;
-
-    h5 {
-      background: darken($ui-base-color, 4%);
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
-      cursor: default;
-      display: flex;
-      padding: 15px;
-      font-weight: 500;
-      font-size: 16px;
-      color: $dark-text-color;
-
-      .fa {
-        display: inline-block;
-        margin-right: 5px;
+  & > .search-results__contents {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    flex: 1 1 auto;
+
+    & > section {
+      margin-bottom: 5px;
+
+      h5 {
+        background: darken($ui-base-color, 4%);
+        border-bottom: 1px solid lighten($ui-base-color, 8%);
+        cursor: default;
+        display: flex;
+        padding: 15px;
+        font-weight: 500;
+        font-size: 16px;
+        color: $dark-text-color;
+
+        .fa {
+          display: inline-block;
+          margin-right: 5px;
+        }
       }
-    }
 
-    .account:last-child,
-    & > div:last-child .status {
-      border-bottom: 0;
-    }
+      .account:last-child,
+      & > div:last-child .status {
+        border-bottom: 0;
+      }
 
-    & > .hashtag {
-      display: block;
-      padding: 10px;
-      color: $secondary-text-color;
-      text-decoration: none;
-
-      &:hover,
-      &:active,
-      &:focus {
-        color: lighten($secondary-text-color, 4%);
-        text-decoration: underline;
+      & > .hashtag {
+        display: block;
+        padding: 10px;
+        color: $secondary-text-color;
+        text-decoration: none;
+
+        &:hover,
+        &:active,
+        &:focus {
+          color: lighten($secondary-text-color, 4%);
+          text-decoration: underline;
+        }
       }
     }
   }