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

3 files changed, 75 insertions, 55 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"
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index c9865610b78..af17210f341 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -454,6 +454,7 @@ img.emoji {
 .prepend-left-10 { margin-left: 10px; }
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px; }
+.append-right-4 { margin-right: 4px; }
 .append-right-5 { margin-right: 5px; }
 .append-right-8 { margin-right: 8px; }
 .append-right-10 { margin-right: 10px; }
@@ -470,3 +471,5 @@ img.emoji {
 .center { text-align: center; }
 .vertical-align-middle { vertical-align: middle; }
 .flex-align-self-center { align-self: center; }
+.flex-grow { flex-grow: 1; }
+.flex-no-shrink { flex-shrink: 0; }
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 05bf5596fb3..1587aebfe1d 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -290,9 +290,8 @@
   }
 
   .folder-toggle-wrap {
-    float: left;
-    line-height: $list-text-height;
     font-size: 0;
+    flex-shrink: 0;
 
     span {
       font-size: $gl-font-size;
@@ -308,7 +307,7 @@
     width: 15px;
 
     svg {
-      margin-bottom: 2px;
+      margin-bottom: 1px;
     }
   }
 
@@ -391,9 +390,17 @@
       cursor: pointer;
     }
 
-    .avatar-container > a {
-      width: 100%;
-      text-decoration: none;
+    .group-text {
+      min-width: 0; // allows for truncated text within flex children
+    }
+
+    .avatar-container {
+      flex-shrink: 0;
+
+      > a {
+        width: 100%;
+        text-decoration: none;
+      }
     }
 
     &.has-more-items {
@@ -401,9 +408,18 @@
       padding: 20px 10px;
     }
 
+    .description {
+      p {
+        @include str-truncated;
+
+        max-width: none;
+      }
+    }
+
     .stats {
       position: relative;
-      line-height: 46px;
+      line-height: normal;
+      flex-shrink: 0;
 
       > span {
         display: inline-flex;
@@ -422,14 +438,20 @@
     }
 
     .controls {
-      margin-left: 5px;
+      flex-shrink: 0;
 
       > .btn {
-        margin-right: $btn-margin-5;
+        margin: 0 0 0 $btn-margin-5;
       }
     }
   }
 
+  @include media-breakpoint-down(xs) {
+    .group-stats {
+      display: none;
+    }
+  }
+
   .project-row-contents .stats {
     line-height: inherit;
 
@@ -451,18 +473,6 @@
   }
 }
 
-ul.group-list-tree {
-  li.group-row {
-    > .group-row-contents .title {
-      line-height: $list-text-height;
-    }
-
-    &.has-description > .group-row-contents .title {
-      line-height: inherit;
-    }
-  }
-}
-
 .js-groups-list-holder {
   .groups-list-loading {
     font-size: 34px;