Improve spacing and wrapping of group actions buttons and stats

Action buttons were wrapping incorrectly on group listing pages.
Also moves spacing to GitLab UI utility classes

app/assets/javascripts/groups/components/group_item.vue

@@ -122,7 +122,7 @@ export default {
               v-tooltip
               :href="group.relativePath"
               :title="group.fullName"
-              class="no-expand gl-mt-3 gl-mr-3"
+              class="no-expand gl-mt-3 gl-mr-3 gl-text-gray-900!"
               data-placement="bottom"
               >{{
                 // ending bracket must be by closing tag to prevent

app/assets/javascripts/groups/components/item_actions.vue

@@ -53,7 +53,7 @@ export default {
       :aria-label="leaveBtnTitle"
       data-container="body"
       data-placement="bottom"
-      class="leave-group btn btn-xs no-expand"
+      class="leave-group btn btn-xs no-expand gl-text-gray-700 gl-ml-5"
       @click.prevent="onLeaveGroup"
     >
       <icon name="leave" class="position-top-0" />
@@ -66,7 +66,7 @@ export default {
       :aria-label="editBtnTitle"
       data-container="body"
       data-placement="bottom"
-      class="edit-group btn btn-xs no-expand"
+      class="edit-group btn btn-xs no-expand gl-text-gray-700 gl-ml-5"
     >
       <icon name="settings" class="position-top-0 align-middle" />
     </a>

app/assets/javascripts/groups/components/item_stats.vue

@@ -44,26 +44,26 @@ export default {
 </script>
 
 <template>
-  <div class="stats">
+  <div class="stats gl-text-gray-700">
     <item-stats-value
       v-if="isGroup"
       :title="__('Subgroups')"
       :value="item.subgroupCount"
-      css-class="number-subgroups"
+      css-class="number-subgroups gl-ml-5"
       icon-name="folder-o"
     />
     <item-stats-value
       v-if="isGroup"
       :title="__('Projects')"
       :value="item.projectCount"
-      css-class="number-projects"
+      css-class="number-projects gl-ml-5"
       icon-name="bookmark"
     />
     <item-stats-value
       v-if="isGroup"
       :title="__('Members')"
       :value="item.memberCount"
-      css-class="number-users"
+      css-class="number-users gl-ml-5"
       icon-name="users"
     />
     <item-stats-value

app/assets/stylesheets/pages/groups.scss

@@ -14,17 +14,12 @@
   flex-direction: column;
   margin: 0;
 
-  .group-row-contents .controls > .btn:last-child {
-    margin: 0;
-  }
-
   li {
     .title {
       font-weight: 600;
     }
 
     a {
-      color: $gray-900;
       text-decoration: none;
 
       &:hover {
@@ -42,8 +37,6 @@
 }
 
 .group-row {
-  @include basic-list-stats;
-
   .description p {
     margin-bottom: 0;
     color: $gl-text-color-secondary;
@@ -454,29 +447,10 @@ table.pipeline-project-metrics tr td {
         min-width: 30px;
       }
 
-      > span:last-child {
-        margin-right: 0;
-      }
-
       .stat-value {
         margin: 2px 0 0 5px;
       }
     }
-
-    .controls {
-      flex-basis: 90px;
-
-      > .btn {
-        margin: 0 $btn-side-margin 0 0;
-        color: $gl-text-color-secondary;
-      }
-    }
-
-    .metadata {
-      @include media-breakpoint-up(md) {
-        flex-basis: 240px;
-      }
-    }
   }
 
   .project-row-contents .stats {

changelogs/unreleased/213009-when-filtering-by-groups-icons-are-misaligned.yml

+---
+title: Improve spacing and wrapping of group actions buttons and stats in group list
+  view
+merge_request: 32786
+author:
+type: fixed