UX: fix layout of group header buttons on mobile (#12781)

UX: fix layout of group header buttons on mobile (#12781)

diff --git a/app/assets/javascripts/discourse/app/templates/group.hbs b/app/assets/javascripts/discourse/app/templates/group.hbs
index 15c2321..2ea514c 100644
--- a/app/assets/javascripts/discourse/app/templates/group.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group.hbs
@@ -33,15 +33,6 @@
           showLogin=(route-action "showLogin")
         }}
 
-        {{#if displayGroupMessageButton}}
-          {{d-button
-            action=(action "messageGroup")
-            class="btn-primary group-message-button"
-            icon="envelope"
-            label="groups.message"
-          }}
-        {{/if}}
-
         {{#if currentUser.admin}}
           {{#if model.automatic}}
             {{d-button
@@ -60,6 +51,15 @@
             }}
           {{/if}}
         {{/if}}
+
+        {{#if displayGroupMessageButton}}
+          {{d-button
+            action=(action "messageGroup")
+            class="btn-primary group-message-button"
+            icon="envelope"
+            label="groups.message"
+          }}
+        {{/if}}
       </div>
 
       {{plugin-outlet name="group-details-after" args=(hash model=model)}}
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index edf0602..a8c0577 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -83,8 +83,10 @@ span.mention-group {
 
   .group-details-button {
     display: flex;
-    flex-shrink: 0;
-    gap: 10px;
+    flex-wrap: wrap;
+    button:not(:last-child) {
+      margin-right: 0.5em;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/mobile/group.scss b/app/assets/stylesheets/mobile/group.scss
index 52c10a8..d54562b 100644
--- a/app/assets/stylesheets/mobile/group.scss
+++ b/app/assets/stylesheets/mobile/group.scss
@@ -43,4 +43,7 @@
 
 .group-info {
   flex-wrap: wrap;
+  .group-details-button button {
+    margin-top: 0.5em;
+  }
 }

GitHub sha: b9b4d248

This commit appears in #12781 which was approved by jjaffeux. It was merged by awesomerobot.