UX: On very short screens switch quick-access-profile to 2-columns (#12120)

app/assets/stylesheets/common/base/menu-panel.scss

@@ -356,11 +356,26 @@
 
     &.quick-access-profile {
       display: inline;
-      overflow-y: auto; // There's no "show all" for this content, so it always needs to be scrollable
+      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: inline;
+          display: grid;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          grid-gap: 0 1em;
           a {
-          box-sizing: border-box; // without this you end up with horizontal scroll
+            @include ellipsis;
+          }
+          button {
+            span:not(.relative-date) {
+              @include ellipsis;
+            }
           }
         }
         li:not(.show-all) a {
@@ -370,6 +385,7 @@
       }
     }
   }
+}
 
 .user-notifications-link {
   // keep this in leftmost position consistently

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