Change styling to always have scrollbar on search results

1 files changed, 43 insertions, 34 deletions

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;
+        }
       }
     }
   }