Improve trends layout (#7700)

* Allow collapsing trends, responsively hide trends

* Add trends column

1 files changed, 20 insertions, 4 deletions

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 124998a48..39eaf5061 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2178,8 +2178,7 @@ a.account__display-name {
 }
 
 .getting-started__wrapper {
-  position: relative;
-  overflow-y: auto;
+  flex: 0 0 auto;
 }
 
 .flex-spacer {
@@ -2187,7 +2186,6 @@ a.account__display-name {
 }
 
 .getting-started {
-  flex: 1 0 auto;
   color: $dark-text-color;
 
   p {
@@ -2228,7 +2226,23 @@ a.account__display-name {
 
   &__trends {
     background: $ui-base-color;
-    flex: 1 1 auto;
+    flex: 0 1 auto;
+
+    @media screen and (max-height: 810px) {
+      .trends__item:nth-child(3) {
+        display: none;
+      }
+    }
+
+    @media screen and (max-height: 720px) {
+      .trends__item:nth-child(2) {
+        display: none;
+      }
+    }
+
+    @media screen and (max-height: 670px) {
+      display: none;
+    }
   }
 
   &__scrollable {
@@ -2460,8 +2474,10 @@ a.status-card {
   line-height: inherit;
   margin: 0;
   padding: 15px;
+  box-sizing: border-box;
   width: 100%;
   clear: both;
+  text-decoration: none;
 
   &:hover {
     background: lighten($ui-base-color, 2%);