UX: minor tweaks to theme components selection UI (#6596)

app/assets/javascripts/admin/components/themes-list-item.js.es6

@@ -67,6 +67,11 @@ export default Ember.Component.extend({
     return children.map(t => t.get("name"));
   },
 
+  @computed("children")
+  childrenString(children) {
+    return children.join(", ");
+  },
+
   @computed(
     "theme.childThemes.length",
     "theme.component",

app/assets/javascripts/admin/templates/components/themes-list-item.hbs

@@ -25,11 +25,8 @@
 
   {{#if displayComponents}}
     <div class="components-list">
-      {{#each children as |child|}}
+      <span class="components">{{childrenString}}</span>
-        <span class="component">
+
-          {{child}}
-        </span>
-      {{/each}}
       {{#if displayHasMore}}
         <span {{action "toggleChildrenExpanded"}} class="others-count">
           {{#if childrenExpanded}}

app/assets/stylesheets/common/admin/customize.scss

@@ -307,22 +307,15 @@
 
       .components-list {
         margin-top: 5px;
-        display: flex;
+        display: inline-block;
-        flex-wrap: wrap;
         font-size: $font-down-1;
         align-items: baseline;
+        color: $primary-high;
 
+        .others-count,
         .others-count:hover {
           text-decoration: underline;
         }
-        .component {
-          display: flex;
-          padding: 3px 5px 3px 5px;
-          border-radius: 2px;
-          border: 1px solid $primary-low;
-          margin-right: 5px;
-          margin-bottom: 5px;
-        }
       }
 
       .inner-wrapper {

test/javascripts/admin/components/themes-list-item-test.js.es6

@@ -69,12 +69,17 @@ componentTest("with children", {
   test(assert) {
     assert.expect(2);
     assert.deepEqual(
-      Array.from(this.$(".component")).map(node => node.innerText.trim()),
+      find(".components")
-      childrenList.splice(0, 4).map(theme => theme.get("name")),
+        .text()
+        .trim(),
+      childrenList
+        .splice(0, 4)
+        .map(theme => theme.get("name"))
+        .join(", "),
       "lists the first 4 children"
     );
     assert.deepEqual(
-      this.$(".others-count")
+      find(".others-count")
         .text()
         .trim(),
       I18n.t("admin.customize.theme.and_x_more", { count: 1 }),