OwnersList: Show detailed list for small number of owners

Author: Turbo87

app/components/owners-list.hbs

@@ -1,8 +1,14 @@
-<ul local-class='owners' data-test-owners>
+<ul local-class="list {{if this.showDetailedList "detailed"}}" data-test-owners>
   {{#each @owners as |owner|}}
     <li>
-      <LinkTo @route={{owner.kind}} @model={{owner.login}} data-test-owner-link={{owner.login}}>
-        <UserAvatar @user={{owner}} @size="medium-small" />
+      <LinkTo
+        @route={{owner.kind}}
+        @model={{owner.login}}
+        local-class="link"
+        data-test-owner-link={{owner.login}}
+      >
+        <UserAvatar @user={{owner}} @size="medium-small" local-class="avatar" />
+        <span local-class="name">{{or owner.display_name owner.name}}</span>
       </LinkTo>
     </li>
   {{/each}}

app/components/owners-list.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class VersionRow extends Component {
+  get showDetailedList() {
+    return this.args.owners.length <= 5;
+  }
+}

app/components/owners-list.module.css

@@ -1,11 +1,45 @@
-.owners {
+.list.detailed {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    > * + * {
+        margin-top: 5px;
+    }
+
+    .link {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+    }
+
+    .avatar {
+        margin-right: 10px;
+    }
+
+    .name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.list:not(.detailed) {
     display: flex;
     flex-wrap: wrap;
     list-style: none;
     padding: 0;
-    margin: 0;
+    margin: 0 0 -10px;
 
-    li {
-        margin: 0 7px 7px 0;
+    > * {
+        margin: 0 10px 10px 0;
     }
+
+    .name {
+        display: none;
+    }
+}
+
+.avatar {
+    border-radius: 4px;
 }