From 5e97946f9ff4ac796a8f00f15f858f4e85068f31 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 20 Apr 2021 18:34:33 -0400
Subject: [PATCH] UX: improve user card control layout for long text (#12770)

---
 app/assets/stylesheets/desktop/components/user-card.scss | 1 +
 app/assets/stylesheets/mobile/components/user-card.scss  | 9 ++++-----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/desktop/components/user-card.scss b/app/assets/stylesheets/desktop/components/user-card.scss
index da9d5815b03..597458bf7de 100644
--- a/app/assets/stylesheets/desktop/components/user-card.scss
+++ b/app/assets/stylesheets/desktop/components/user-card.scss
@@ -16,6 +16,7 @@
       flex: 1 1 auto;
     }
     .usercard-controls {
+      max-width: 225px;
       button {
         min-width: 150px;
       }
diff --git a/app/assets/stylesheets/mobile/components/user-card.scss b/app/assets/stylesheets/mobile/components/user-card.scss
index 67f97596add..a912aa0e7c7 100644
--- a/app/assets/stylesheets/mobile/components/user-card.scss
+++ b/app/assets/stylesheets/mobile/components/user-card.scss
@@ -17,16 +17,15 @@ $avatar_width: 120px;
       box-sizing: border-box;
     }
     .usercard-controls {
+      --usercard-control-margin: 0.25em;
       display: flex;
       flex: 1;
-      margin-top: 1em;
-      max-width: 100%;
+      flex-wrap: wrap;
+      margin: 1em calc(var(--usercard-control-margin) * -1) 0;
       li {
         flex: 1 0 auto;
         min-width: 0;
-        &:nth-child(2) {
-          border-left: 0.5em solid transparent;
-        }
+        margin: 0 var(--usercard-control-margin);
         &:empty {
           display: none;
         }