From b637b57e4f9a86ceeb62ecf104661ae97df088ba Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 19 Jun 2018 15:38:06 -0400
Subject: [PATCH] FIX: Alignment of user dropdown menu icons

---
 .../discourse/widgets/user-menu.js.es6        |  2 +-
 .../stylesheets/common/base/menu-panel.scss   | 24 ++++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/user-menu.js.es6 b/app/assets/javascripts/discourse/widgets/user-menu.js.es6
index a4b06e2ef3..69d987db8f 100644
--- a/app/assets/javascripts/discourse/widgets/user-menu.js.es6
+++ b/app/assets/javascripts/discourse/widgets/user-menu.js.es6
@@ -94,7 +94,7 @@ createWidget("user-menu-links", {
     });
 
     return h("ul.menu-links-row", [
-      links.map(l => h("li", this.attach("link", l))),
+      links.map(l => h("li.user", this.attach("link", l))),
       h(
         "li.glyphs",
         glyphs.map(l => this.attach("link", $.extend(l, { hideLabel: true })))
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 169c9b9f62..18c5083e8d 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -341,13 +341,18 @@ div.menu-links-header {
   border-collapse: separate;
   border-spacing: 0 0.5em;
   .menu-links-row {
-    display: table-row;
-    li.glyphs {
-      text-align: right;
-      a {
-        display: inline-flex;
-        min-width: 15px;
-        justify-content: center;
+    display: flex;
+    li {
+      display: inline-flex;
+      align-items: center;
+      flex-wrap: wrap;
+      &.user {
+        margin-right: auto;
+      }
+      &.glyphs {
+        flex-wrap: wrap;
+        text-align: right;
+        max-width: 65%; //IE11
       }
     }
   }
@@ -357,7 +362,7 @@ div.menu-links-header {
     outline: none;
   }
   a {
-    padding: 0.5em;
+    padding: 0.3em 0.5em;
   }
   a.user-activity-link {
     max-width: 150px;
@@ -366,6 +371,9 @@ div.menu-links-header {
     overflow: hidden;
     text-overflow: ellipsis;
     margin: -0.5em 0;
+    @media screen and (max-width: 350px) {
+      max-width: 125px;
+    }
   }
   li {
     display: table-cell;