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

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)}}

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;
+    }
   }
 }
 

app/assets/stylesheets/mobile/group.scss

@@ -43,4 +43,7 @@
 
 .group-info {
   flex-wrap: wrap;
+  .group-details-button button {
+    margin-top: 0.5em;
+  }
 }