UX: Tweak `group` layout to fix button alignment (#12167)

Included:

* DEV: Span can't contains divs
* DEV: Drop extra elements
* UX: Tweak `group` layout to fix button alignment
* UX: Add space between "Members" and "(N)"

app/assets/javascripts/discourse/app/templates/group.hbs

@@ -4,37 +4,25 @@
   <div class="group-details-container">
     <div class="group-info">
       {{#if model.flair_url}}
-        <span class="group-avatar-flair">
+        <div class="group-avatar-flair">
           {{avatar-flair
             flairURL=model.flair_url
             flairBgColor=model.flair_bg_color
             flairColor=model.flair_color
             groupName=model.name
           }}
-        </span>
+        </div>
       {{/if}}
 
-      <span>
+      <div class="group-info-names">
         <span class="group-info-name">{{groupName}}</span>
 
-        <div>
-          {{#if model.full_name}}<span class="group-info-full-name">{{model.name}}</span>{{/if}}
+        {{#if model.full_name}}<div class="group-info-full-name">{{model.name}}</div>{{/if}}
       </div>
-      </span>
-      {{plugin-outlet name="group-details-after" args=(hash model=model)}}
-    </div>
-
-    {{#if model.bio_cooked}}
-      <hr>
-
-      <div class="group-bio">
-        <p>{{html-safe model.bio_cooked}}</p>
-      </div>
-    {{/if}}
 
       <div class="group-details-button">
         {{group-membership-button
-        class="inline"
+          tagName=""
           model=model
           showLogin=(route-action "showLogin")
         }}
@@ -42,7 +30,7 @@
         {{#if displayGroupMessageButton}}
           {{d-button
             action=(action "messageGroup")
-          class="btn-primary group-message-button inline"
+            class="btn-primary group-message-button"
             icon="envelope"
             label="groups.message"
           }}
@@ -58,13 +46,26 @@
           }}
         {{/if}}
       </div>
+
+      {{plugin-outlet name="group-details-after" args=(hash model=model)}}
     </div>
+
+    {{#if model.bio_cooked}}
+      <hr>
+
+      <div class="group-bio">
+        <p>{{html-safe model.bio_cooked}}</p>
+      </div>
+    {{/if}}
+  </div>
+
   <div class="user-content-wrapper">
     <section class="user-primary-navigation">
       <div class="container">
         {{group-navigation group=model currentPath=currentPath tabs=tabs}}
       </div>
     </section>
+
     {{outlet}}
   </div>
 </div>

app/assets/stylesheets/common/base/group.scss

@@ -37,7 +37,13 @@ span.mention-group {
 }
 
 .group-info {
-  width: 100%;
+  align-items: flex-start;
+  display: flex;
+  gap: 10px;
+
+  .group-info-names {
+    flex-grow: 1;
+  }
 
   .group-info-name {
     font-size: $font-up-3;
@@ -50,11 +56,6 @@ span.mention-group {
     color: var(--primary-high-or-secondary-low);
   }
 
-  span {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
   $size: 50px;
   $icon-size: $size / 1.8;
 
@@ -77,6 +78,18 @@ span.mention-group {
       width: $icon-size;
     }
   }
+
+  .group-details-button {
+    display: flex;
+    flex-shrink: 0;
+    gap: 10px;
+  }
+}
+
+.group-nav {
+  .count {
+    margin-left: 5px;
+  }
 }
 
 .group-manage-logs-filter {

app/assets/stylesheets/desktop/group.scss

@@ -3,9 +3,6 @@
     margin-right: 10px;
   }
 }
-.group-info {
-  margin-bottom: 20px;
-}
 
 .group-navigation {
   width: 15%;

app/assets/stylesheets/mobile/group.scss

@@ -40,3 +40,7 @@
     }
   }
 }
+
+.group-info {
+  flex-wrap: wrap;
+}