Product Detail is neater.

Recipe list fixed.

Recipe xlsx not working.

overlord/src/app/product/product-detail/product-detail.component.css

@@ -0,0 +1,11 @@
+.nutrition-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  align-items: stretch;
+  justify-items: stretch;
+}
+.nutrition-grid > * {
+  width: 100%;
+  box-sizing: border-box; /* helps with padding */
+}

overlord/src/app/product/product-detail/product-detail.component.html

@@ -47,7 +47,7 @@
   </div>
   @if (item.productGroup?.nutritional ?? false) {
     <h2>Nutritional Information</h2>
-    <div class="row-container">
+    <div class="nutrition-grid">
       <mat-form-field class="flex-auto">
         <mat-label>Protein</mat-label>
         <input matInput formControlName="protein" />
@@ -108,7 +108,7 @@
     </div>
   }
   <h2>Stock Keeping Units</h2>
-  <div formGroupName="addRow" class="row-container space-between">
+  <div formGroupName="addRow" class="nutrition-grid">
     <mat-form-field class="flex-auto">
       <mat-label>Units</mat-label>
       <input matInput formControlName="units" />
@@ -132,7 +132,7 @@
     <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto">Add</button>
   </div>
 </form>
-<div class="row-container">
+<div class="row-container wrapped">
   <mat-table [dataSource]="dataSource" aria-label="Elements" class="flex-auto">
     <!-- Units Column -->
     <ng-container matColumnDef="units">