diff --git a/app/assets/javascripts/admin/components/themes-list-item.js.es6 b/app/assets/javascripts/admin/components/themes-list-item.js.es6
index 44f337dd76e..0bd69f92d25 100644
--- a/app/assets/javascripts/admin/components/themes-list-item.js.es6
+++ b/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",
diff --git a/app/assets/javascripts/admin/templates/components/themes-list-item.hbs b/app/assets/javascripts/admin/templates/components/themes-list-item.hbs
index a12ddb41235..42e6674fac1 100644
--- a/app/assets/javascripts/admin/templates/components/themes-list-item.hbs
+++ b/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="component">
-          {{child}}
-        </span>
-      {{/each}}
+      <span class="components">{{childrenString}}</span>
+
       {{#if displayHasMore}}
         <span {{action "toggleChildrenExpanded"}} class="others-count">
           {{#if childrenExpanded}}
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 9c8cadc6640..78c5c47095e 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -307,22 +307,15 @@
 
       .components-list {
         margin-top: 5px;
-        display: flex;
-        flex-wrap: wrap;
+        display: inline-block;
         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 {
diff --git a/test/javascripts/admin/components/themes-list-item-test.js.es6 b/test/javascripts/admin/components/themes-list-item-test.js.es6
index c08f1805b5c..4ab80eca33a 100644
--- a/test/javascripts/admin/components/themes-list-item-test.js.es6
+++ b/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()),
-      childrenList.splice(0, 4).map(theme => theme.get("name")),
+      find(".components")
+        .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 }),