UX: Larger tap areas for profile panel in user menu on mobile devices

UX: Larger tap areas for profile panel in user menu on mobile devices

diff --git a/app/assets/javascripts/discourse/widgets/quick-access-profile.js b/app/assets/javascripts/discourse/widgets/quick-access-profile.js
index cb4c58e..c4c7b71 100644
--- a/app/assets/javascripts/discourse/widgets/quick-access-profile.js
+++ b/app/assets/javascripts/discourse/widgets/quick-access-profile.js
@@ -3,6 +3,8 @@ import { createWidgetFrom } from "discourse/widgets/widget";
 import { Promise } from "rsvp";
 
 createWidgetFrom(QuickAccessPanel, "quick-access-profile", {
+  tagName: "div.quick-access-panel.quick-access-profile",
+
   buildKey: () => "quick-access-profile",
 
   hasMore() {
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index a446bff..ca1f2b5 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -7,10 +7,7 @@
   }
 
   .panel-body {
-    position: absolute;
-    top: 3px;
-    bottom: 37px;
-    width: 97%;
+    width: 100%;
   }
 }
 .header-cloak {
diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss
index 9392ae7..ab6a5e3 100644
--- a/app/assets/stylesheets/mobile/menu-panel.scss
+++ b/app/assets/stylesheets/mobile/menu-panel.scss
@@ -15,3 +15,9 @@
     transition: opacity 0.2s ease-out;
   }
 }
+
+.user-menu .quick-access-profile li:not(.show-all) {
+  margin: 0.5em 0 0.75em;
+  padding: 0.75em;
+  border: 1px solid $primary-low;
+}

GitHub sha: 39dde33c

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/improving-the-layout-of-the-user-menu-tab/132069/25