basic card content formatting

src/app/components/metadata/categories/categories.component.html

@@ -5,12 +5,18 @@
     </mat-card-header>
 
     <mat-card-content>
-      @for (category of categories(); track category.id) {
-        {{ category.name }}
-      }
-      @if (!categories().length) {
-        No categories to display
-      }
+      <div class="category-list">
+        @for (category of categories(); track category.id) {
+          <div>
+            {{ category.name }}
+          </div>
+        }
+        @if (!categories().length) {
+          <div>
+            No categories to display
+          </div>
+        }
+      </div>
     </mat-card-content>
   </mat-card>
 </div>

src/app/components/metadata/categories/categories.component.scss

@@ -11,3 +11,9 @@
     width: 100%;
   }
 }
+
+.category-list {
+  padding-top: 1rem;
+  display: grid;
+  gap: 0.5rem;
+}