Change styling to always have scrollbar on search results

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}
+        <div className='search-results__contents'>
-        {statuses}
+          {accounts}
-        {hashtags}
+          {statuses}
+          {hashtags}
+        </div>
       </div>
     );
   };

app/javascript/flavours/glitch/styles/components/drawer.scss

@@ -115,8 +115,10 @@
 
 .drawer--results {
   background: $ui-base-color;
-  overflow-x: hidden;
+  overflow: hidden;
-  overflow-y: auto;
+  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 {
+  & > .search-results__contents {
-    margin-bottom: 5px;
+    overflow-x: hidden;
-
+    overflow-y: scroll;
-    h5 {
+    flex: 1 1 auto;
-      background: darken($ui-base-color, 4%);
+
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
+    & > section {
-      cursor: default;
+      margin-bottom: 5px;
-      display: flex;
+
-      padding: 15px;
+      h5 {
-      font-weight: 500;
+        background: darken($ui-base-color, 4%);
-      font-size: 16px;
+        border-bottom: 1px solid lighten($ui-base-color, 8%);
-      color: $dark-text-color;
+        cursor: default;
-
+        display: flex;
-      .fa {
+        padding: 15px;
-        display: inline-block;
+        font-weight: 500;
-        margin-right: 5px;
+        font-size: 16px;
+        color: $dark-text-color;
+
+        .fa {
+          display: inline-block;
+          margin-right: 5px;
+        }
       }
-    }
 
-    .account:last-child,
+      .account:last-child,
-    & > div:last-child .status {
+      & > div:last-child .status {
-      border-bottom: 0;
+        border-bottom: 0;
-    }
+      }
 
-    & > .hashtag {
+      & > .hashtag {
-      display: block;
+        display: block;
-      padding: 10px;
+        padding: 10px;
-      color: $secondary-text-color;
+        color: $secondary-text-color;
-      text-decoration: none;
+        text-decoration: none;
-
+
-      &:hover,
+        &:hover,
-      &:active,
+        &:active,
-      &:focus {
+        &:focus {
-        color: lighten($secondary-text-color, 4%);
+          color: lighten($secondary-text-color, 4%);
-        text-decoration: underline;
+          text-decoration: underline;
+        }
       }
     }
   }