Resolve "Group dashboard > Line height is too tall for group names"

1 files changed, 41 insertions, 34 deletions

diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index efbf2e3a295..2b9e2a929fc 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -78,17 +78,10 @@ export default {
   >
     <div
       :class="{ 'project-row-contents': !isGroup }"
-      class="group-row-contents">
-      <item-actions
-        v-if="isGroup"
-        :group="group"
-        :parent-group="parentGroup"
-      />
-      <item-stats
-        :item="group"
-      />
+      class="group-row-contents d-flex justify-content-end align-items-center"
+    >
       <div
-        class="folder-toggle-wrap"
+        class="folder-toggle-wrap append-right-4 d-flex align-items-center"
       >
         <item-caret
           :is-group-open="group.isOpen"
@@ -100,7 +93,7 @@ export default {
       </div>
       <div
         :class="{ 'content-loading': group.isChildrenLoading }"
-        class="avatar-container prepend-top-8 prepend-left-5 s24 d-none d-sm-block"
+        class="avatar-container s24 d-none d-sm-block"
       >
         <a
           :href="group.relativePath"
@@ -120,32 +113,46 @@ export default {
         </a>
       </div>
       <div
-        class="title namespace-title"
+        class="group-text flex-grow"
       >
-        <a
-          v-tooltip
-          :href="group.relativePath"
-          :title="group.fullName"
-          class="no-expand"
-          data-placement="bottom"
-        >{{
-          // ending bracket must be by closing tag to prevent
-          // link hover text-decoration from over-extending
-          group.name
-        }}</a>
-        <span
-          v-if="group.permission"
-          class="user-access-role"
+        <div
+          class="title namespace-title append-right-8"
         >
-          {{ group.permission }}
-        </span>
-      </div>
-      <div
-        v-if="group.description"
-        class="description">
-        <span v-html="group.description">
-        </span>
+          <a
+            v-tooltip
+            :href="group.relativePath"
+            :title="group.fullName"
+            class="no-expand"
+            data-placement="bottom"
+          >{{
+            // ending bracket must be by closing tag to prevent
+            // link hover text-decoration from over-extending
+            group.name
+          }}</a>
+          <span
+            v-if="group.permission"
+            class="user-access-role"
+          >
+            {{ group.permission }}
+          </span>
+        </div>
+        <div
+          v-if="group.description"
+          class="description"
+        >
+          <span v-html="group.description">
+          </span>
+        </div>
       </div>
+      <item-stats
+        :item="group"
+        class="group-stats prepend-top-2"
+      />
+      <item-actions
+        v-if="isGroup"
+        :group="group"
+        :parent-group="parentGroup"
+      />
     </div>
     <group-folder
       v-if="group.isOpen && hasChildren"