chore: 🤖 Integrate rose/table component into host catalogs page

ui/core/app/styles/app.scss

@@ -19,14 +19,12 @@
   }
 }
 
-.projects-overview {
-  margin: sizing.rems(l);
+.rose-layout-global-body {
+  margin: 0 sizing.rems(m);
 }
 
 .project-overview,
 .project-new {
-  margin: sizing.rems(l);
-
   .breadcrumbs,
   .breadcrumbs a {
     color: #6f7682;

ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs

@@ -13,18 +13,22 @@
   </page.actions>
 
   <page.body>
-    <ul>
-      {{#each @model as |hostCatalog|}}
-        <li>
-          <LinkTo
-            @route="orgs.org.projects.project.host-catalogs.host-catalog"
-            @model={{hostCatalog}}
-          >
-            {{hostCatalog.name}}
-          </LinkTo>
-        </li>
-      {{/each}}
-    </ul>
+    <Rose::Table as |table|>
+      <table.body as |body|>
+        {{#each @model as |hostCatalog|}}
+          <body.row as |row|>
+            <row.cell>
+              <LinkTo
+                @route="orgs.org.projects.project.host-catalogs.host-catalog"
+                @model={{hostCatalog}}
+              >
+                {{hostCatalog.name}}
+              </LinkTo>
+            </row.cell>
+          </body.row>
+        {{/each}}
+      </table.body>
+    </Rose::Table>
   </page.body>
 
 </Rose::Layout::Page>

ui/core/tests/acceptance/host-catalogs-test.js

@@ -23,7 +23,7 @@ module('Acceptance | host catalogs', function(hooks) {
     this.server.createList('project', 1);
     this.server.createList('host-catalog', 1);
     await visit('/orgs/1/projects/1/host-catalogs');
-    await click('main ul li:first-child a');
+    await click('main .rose-table-cell:first-child a');
     await a11yAudit();
     assert.equal(currentURL(), '/orgs/1/projects/1/host-catalogs/1');
   });