Fix catalog layout issue

app/apps-tab/index/controller.js

@@ -21,12 +21,26 @@ export default Controller.extend({
   filteredApps: computed('model.apps.@each.{type,isFromCatalog,tags,state}', 'tags', function() {
     var needTags = get(this, 'tags');
 
-    var out = get(this, 'model.apps').filter((ns) => !C.REMOVEDISH_STATES.includes(get(ns, 'state')));
+    var apps = get(this, 'model.apps').filter((ns) => !C.REMOVEDISH_STATES.includes(get(ns, 'state')));
 
     if ( needTags && needTags.length ) {
-      out = out.filter((obj) => obj.hasTags(needTags));
+      apps = apps.filter((obj) => obj.hasTags(needTags));
     }
 
-    return out.sortBy('displayName');
+    apps = apps.sortBy('displayName');
+
+    const group = [];
+    let dataIndex = 0;
+
+    apps.forEach((app, index) => {
+      if ( index % 2 === 0 ) {
+        group.push([app]);
+        dataIndex++;
+      } else {
+        group[dataIndex - 1].push(app);
+      }
+    });
+
+    return group;
   }),
 });

app/apps-tab/index/template.hbs

@@ -7,8 +7,14 @@
 </section>
 
 <section class="pl-0 pr-0">
-  {{#each filteredApps as |ns|}}
+  {{#each filteredApps as |group|}}
-    {{namespace-app model=ns}}
+    <div class="row flex">
+      {{#each group as |ns|}}
+        <div class="col span-6 mt-0">
+          {{namespace-app model=ns}}
+        </div>
+      {{/each}}
+    </div>
   {{else}}
     {{empty-table disabled=(rbac-prevents resource="app" scope="project" permission="create") resource="container" newRoute="catalog-tab" newTranslationKey="nav.apps.launch"}}
   {{/each}}

app/styles/base/_helpers.scss

@@ -132,6 +132,9 @@
   display: block !important;
 }
 
+.flex {
+  display:flex;
+}
 
 .inline-block {
   display: inline-block !important;

app/styles/components/_namespace-app.scss

@@ -1,9 +1,7 @@
 .namespace-app {
   margin-bottom: 20px;
   position: relative;
-  float: left;
+  height: 100%;
-  width: calc(50% - 15px);
-  margin: 15px 0 15px 15px;
 
   &:last-child {
     margin-bottom: 0;
@@ -11,6 +9,7 @@
   .stack-info {
     display: table;
     width: 100%;
+    height: 100%;
   }
   .catalog-icon {
     @include catalog-img(transparent);