From 76b28ed8364e9ae7ae8905d746145dc574683ccc Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 6 Aug 2024 17:47:51 -0400
Subject: [PATCH] UX: fix user profile button wrap, clean up styles (#28255)

---
 app/assets/stylesheets/common/base/user.scss  |  7 +++--
 app/assets/stylesheets/desktop/user.scss      | 24 +++++----------
 app/assets/stylesheets/mobile/user.scss       | 30 -------------------
 .../stylesheets/common/core-extensions.scss   |  4 ++-
 4 files changed, 16 insertions(+), 49 deletions(-)

diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index b521b073471..6c2ad411087 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -197,10 +197,12 @@
     }
 
     .controls {
-      margin-left: auto;
       ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5em;
         list-style-type: none;
-        margin-top: 0;
+        margin: 0 0 0.5em 0;
       }
     }
 
@@ -860,6 +862,7 @@
 .primary-textual {
   flex: 1 1 auto;
   min-width: 0;
+  margin-right: auto;
 }
 
 .primary-textual .staged,
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index f93e83d4f4a..57ab0ea7e6c 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -132,6 +132,7 @@ table.user-invite-list {
       }
 
       .primary-textual {
+        flex: 0 1 auto;
         padding: 0 0 0.5em;
       }
 
@@ -154,14 +155,10 @@ table.user-invite-list {
 
     .controls {
       max-width: 13.5em;
+      margin-left: 0.5em;
 
-      li {
-        margin-bottom: 0.5em;
-      }
-
-      li > .select-kit-header, // select-kit
       .btn {
-        min-width: 9.5em;
+        min-width: 9em;
         width: 100%;
       }
     }
@@ -171,19 +168,14 @@ table.user-invite-list {
         display: none;
       }
       .controls {
-        width: auto;
+        display: flex;
         max-width: unset;
+        flex: 1 2 min-content;
 
         > ul {
-          display: inline-flex;
-          > li {
-            display: inline-flex;
-            margin-left: 0.75em;
-          }
-
-          a {
-            width: auto;
-          }
+          flex-wrap: wrap;
+          margin-left: auto;
+          justify-content: end;
         }
       }
 
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 5bd8f30d2d6..714bd7c09ca 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -202,50 +202,20 @@
     .controls {
       flex: 1 1 25%;
 
-      .btn {
-        margin-bottom: 0.5rem;
-      }
-
       ul {
-        margin: 0;
-        display: flex;
-        flex: 1 1 auto;
-        flex-wrap: wrap;
         li,
         > span {
           display: flex;
           flex: 1 1 45%;
-          margin-left: 1em;
           button,
           a {
             width: 100%;
           }
           .select-kit.dropdown-select-box.user-notifications-dropdown {
             width: 100%;
-            align-self: flex-start;
-            li {
-              flex: 1 1 100%;
-              margin-left: 0;
-            }
           }
         }
       }
-
-      > ul {
-        margin-left: -1em; // negates left button margin, for alignment
-      }
-
-      .user-profile-controls-outlet {
-        margin: 0 0 0 1em;
-        li {
-          margin: 0;
-        }
-      }
-
-      a {
-        flex: 1 1 auto;
-        min-width: 120px;
-      }
     }
   }
 
diff --git a/plugins/chat/assets/stylesheets/common/core-extensions.scss b/plugins/chat/assets/stylesheets/common/core-extensions.scss
index d1344d65348..b8872a09748 100644
--- a/plugins/chat/assets/stylesheets/common/core-extensions.scss
+++ b/plugins/chat/assets/stylesheets/common/core-extensions.scss
@@ -13,7 +13,6 @@
 
 .user-summary-page .details .controls ul,
 .user-main .details .controls ul {
-  display: flex;
   flex-direction: column;
 
   li:first-child {
@@ -22,6 +21,9 @@
 
   li.user-profile-controls-outlet.chat-button {
     order: -1;
+    &:empty {
+      display: none;
+    }
   }
 }