From c3f6eb17a5922df697e3d1c5b50144138d049051 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 18 Feb 2021 18:47:37 -0500
Subject: [PATCH] UX: On very short screens switch quick-access-profile to
 2-columns (#12120)

---
 .../stylesheets/common/base/menu-panel.scss   | 30 ++++++++++++++-----
 app/assets/stylesheets/mobile/menu-panel.scss |  5 ++++
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 7b4b658c1db..4368ec5401f 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -356,17 +356,33 @@
 
     &.quick-access-profile {
       display: inline;
-      overflow-y: auto; // There's no "show all" for this content, so it always needs to be scrollable
-      ul {
-        display: inline;
-        a {
-          box-sizing: border-box; // without this you end up with horizontal scroll
-        }
-      }
       li:not(.show-all) a {
         color: var(--primary);
         display: flex;
       }
+      ul button {
+        line-height: 1.4; // match 'ul a' link height
+      }
+      @media screen and (max-height: 360px) {
+        // two column grid to avoid scroll
+        ul {
+          display: grid;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          grid-gap: 0 1em;
+          a {
+            @include ellipsis;
+          }
+          button {
+            span:not(.relative-date) {
+              @include ellipsis;
+            }
+          }
+        }
+        li:not(.show-all) a {
+          color: var(--primary);
+          display: flex;
+        }
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss
index d69cde92604..ca557b6a156 100644
--- a/app/assets/stylesheets/mobile/menu-panel.scss
+++ b/app/assets/stylesheets/mobile/menu-panel.scss
@@ -30,6 +30,11 @@
   button {
     // accounts for menu "ears" 4px + border 1px
     padding: 0.75em calc(0.5em + 4px + 1px);
+    @media screen and (max-height: 380px) {
+      // reduce padding to avoid scroll
+      padding-top: 0.5em;
+      padding-bottom: 0.5em;
+    }
   }
 }