UX: improve user card control layout for long text (#12770)

UX: improve user card control layout for long text (#12770)

diff --git a/app/assets/stylesheets/desktop/components/user-card.scss b/app/assets/stylesheets/desktop/components/user-card.scss
index da9d581..597458b 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 67f9759..a912aa0 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;
         }

GitHub sha: 5e97946f

This commit appears in #12770 which was approved by CvX. It was merged by awesomerobot.