From a85eb7d930c0b1acfef9a25c102d902f63f3d379 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Mon, 12 Jul 2021 08:07:04 +0200
Subject: Fix follow suggestions scrolling on mobile view

Also simplify the CSS a bit and bring it closer to upstream.
---
 .../flavours/glitch/styles/components/drawer.scss  | 76 ++++++++--------------
 .../flavours/glitch/styles/components/search.scss  | 11 +++-
 2 files changed, 34 insertions(+), 53 deletions(-)

(limited to 'app/javascript/flavours/glitch/styles')

diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index b6d06f53a..61969abee 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -120,20 +120,22 @@
 }
 
 .drawer--results {
-  background: $ui-base-color;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
 
-  & > header {
-    color: $dark-text-color;
-    background: lighten($ui-base-color, 2%);
+.search-results__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;
-    cursor: default;
-    flex: 0 0 auto;
+    color: $dark-text-color;
 
     .fa {
       display: inline-block;
@@ -141,48 +143,22 @@
     }
   }
 
-  & > .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;
 
-      & > .hashtag {
-        display: block;
-        padding: 10px;
-        color: $secondary-text-color;
-        text-decoration: none;
-
-        &:hover,
-        &:active,
-        &:focus {
-          color: lighten($secondary-text-color, 4%);
-          text-decoration: underline;
-        }
-      }
+    &:hover,
+    &:active,
+    &:focus {
+      color: lighten($secondary-text-color, 4%);
+      text-decoration: underline;
     }
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss
index eec2e64d6..929769130 100644
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@@ -94,10 +94,15 @@
 .search-results__header {
   color: $dark-text-color;
   background: lighten($ui-base-color, 2%);
-  border-bottom: 1px solid darken($ui-base-color, 4%);
-  padding: 15px 10px;
-  font-size: 14px;
+  padding: 15px;
   font-weight: 500;
+  font-size: 16px;
+  cursor: default;
+
+  .fa {
+    display: inline-block;
+    margin-right: 5px;
+  }
 }
 
 .search-results__info {
-- 
cgit