From 38e53b5e8eab64225879a1b855bc50242f2791e5 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 14 Nov 2023 17:13:37 -0500
Subject: [PATCH] UX: improve mobile user card button display (#24311)

---
 .../app/components/user-card-contents.hbs         | 12 +++++-------
 .../stylesheets/mobile/components/user-card.scss  | 15 ++++++++-------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/user-card-contents.hbs b/app/assets/javascripts/discourse/app/components/user-card-contents.hbs
index 1b4690a403a..e8f87cbd438 100644
--- a/app/assets/javascripts/discourse/app/components/user-card-contents.hbs
+++ b/app/assets/javascripts/discourse/app/components/user-card-contents.hbs
@@ -171,13 +171,11 @@
               />
             </li>
           {{/if}}
-          <li>
-            <PluginOutlet
-              @name="user-card-additional-buttons"
-              @connectorTagName="div"
-              @outletArgs={{hash user=this.user close=(action "close")}}
-            />
-          </li>
+          <PluginOutlet
+            @name="user-card-additional-buttons"
+            @connectorTagName="li"
+            @outletArgs={{hash user=this.user close=(action "close")}}
+          />
         </ul>
         <PluginOutlet
           @name="user-card-additional-controls"
diff --git a/app/assets/stylesheets/mobile/components/user-card.scss b/app/assets/stylesheets/mobile/components/user-card.scss
index 266ab5d1dd1..e80e8950406 100644
--- a/app/assets/stylesheets/mobile/components/user-card.scss
+++ b/app/assets/stylesheets/mobile/components/user-card.scss
@@ -21,20 +21,21 @@
     }
     .usercard-controls {
       width: 100%; // always wraps to next line
-      --usercard-control-margin: 0.25em;
       display: flex;
       flex-wrap: wrap;
-      margin: 1em calc(var(--usercard-control-margin) * -1) 0;
+      margin-top: 1em;
+      gap: 0.5em;
       li {
-        flex: 1 0 calc(50% - (var(--usercard-control-margin) * 2));
-        min-width: 0;
-        margin: 0 var(--usercard-control-margin);
+        flex: 1 0 45%;
+        min-width: 8em;
         &:empty {
           display: none;
         }
         button {
-          @include ellipsis;
-          margin-bottom: calc(var(--usercard-control-margin) * 2);
+          margin: 0;
+          .d-button-label {
+            @include ellipsis;
+          }
         }
       }
     }