From e05ebf5b6279907cafdcae7b7afb7c88c00f2592 Mon Sep 17 00:00:00 2001
From: Jesse Brault <jbrault@mac.com>
Date: Sun, 8 Feb 2026 12:57:23 -0600
Subject: [PATCH] MME-17 Spacing between ingredients table and add ingredient
 button.

---
 .../enter-recipe-data/enter-recipe-data.css   |   6 +
 .../enter-recipe-data/enter-recipe-data.html  | 109 +++++++++---------
 2 files changed, 62 insertions(+), 53 deletions(-)

diff --git a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.css b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.css
index f0915a6..918b5a9 100644
--- a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.css
+++ b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.css
@@ -21,6 +21,12 @@ textarea {
     padding: 0;
 }
 
+.ingredients-container {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+}
+
 .mat-column-reorder {
     width: 32px;
     text-align: center;
diff --git a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html
index 75bbe1d..e5bc9c4 100644
--- a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html
+++ b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html
@@ -24,65 +24,68 @@
         <input matInput [formControl]="recipeFormGroup.controls.slug" />
     </mat-form-field>
 
-    <h3>Ingredients</h3>
+    <div class="ingredients-container">
+        <h3>Ingredients</h3>
 
-    <table
-        #ingredientsTable
-        mat-table
-        [dataSource]="ingredientModels()"
-        cdkDropList
-        (cdkDropListDropped)="onIngredientDrop($event)"
-    >
-        <ng-container matColumnDef="reorder">
-            <th mat-header-cell *matHeaderCellDef></th>
-            <td mat-cell *matCellDef="let model">
-                <fa-icon [icon]="faBars"></fa-icon>
-            </td>
-        </ng-container>
+        <table
+            #ingredientsTable
+            mat-table
+            [dataSource]="ingredientModels()"
+            cdkDropList
+            (cdkDropListDropped)="onIngredientDrop($event)"
+        >
+            <ng-container matColumnDef="reorder">
+                <th mat-header-cell *matHeaderCellDef></th>
+                <td mat-cell *matCellDef="let model">
+                    <fa-icon [icon]="faBars"></fa-icon>
+                </td>
+            </ng-container>
 
-        <ng-container matColumnDef="amount">
-            <th mat-header-cell *matHeaderCellDef>Amount</th>
-            <td mat-cell *matCellDef="let model">
-                {{ model.draft.amount }}
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="amount">
+                <th mat-header-cell *matHeaderCellDef>Amount</th>
+                <td mat-cell *matCellDef="let model">
+                    {{ model.draft.amount }}
+                </td>
+            </ng-container>
 
-        <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef>Name</th>
-            <td mat-cell *matCellDef="let model">
-                {{ model.draft.name }}
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="name">
+                <th mat-header-cell *matHeaderCellDef>Name</th>
+                <td mat-cell *matCellDef="let model">
+                    {{ model.draft.name }}
+                </td>
+            </ng-container>
 
-        <ng-container matColumnDef="notes">
-            <th mat-header-cell *matHeaderCellDef>Notes</th>
-            <td mat-cell *matCellDef="let model">
-                {{ model.draft.notes }}
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="notes">
+                <th mat-header-cell *matHeaderCellDef>Notes</th>
+                <td mat-cell *matCellDef="let model">
+                    {{ model.draft.notes }}
+                </td>
+            </ng-container>
 
-        <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef>Actions</th>
-            <td mat-cell *matCellDef="let model">
-                <button matButton="text" [matMenuTriggerFor]="ingredientActionsMenu" type="button">
-                    <fa-icon [icon]="faEllipsis" size="2x"></fa-icon>
-                </button>
-                <mat-menu #ingredientActionsMenu="matMenu">
-                    <button mat-menu-item (click)="editIngredient(model)" type="button">Edit</button>
-                    <button mat-menu-item (click)="onIngredientDelete(model)" type="button">Delete</button>
-                </mat-menu>
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="actions">
+                <th mat-header-cell *matHeaderCellDef>Actions</th>
+                <td mat-cell *matCellDef="let model">
+                    <button matButton="text" [matMenuTriggerFor]="ingredientActionsMenu" type="button">
+                        <fa-icon [icon]="faEllipsis" size="2x"></fa-icon>
+                    </button>
+                    <mat-menu #ingredientActionsMenu="matMenu">
+                        <button mat-menu-item (click)="editIngredient(model)" type="button">Edit</button>
+                        <button mat-menu-item (click)="onIngredientDelete(model)" type="button">Delete</button>
+                    </mat-menu>
+                </td>
+            </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="['reorder', 'amount', 'name', 'notes', 'actions']"></tr>
-        <tr
-            mat-row
-            *matRowDef="let row; columns: ['reorder', 'amount', 'name', 'notes', 'actions']"
-            cdkDrag
-            [cdkDragData]="row"
-        ></tr>
-    </table>
-    <button matButton="outlined" (click)="addIngredient()" type="button">Add Ingredient</button>
+            <tr mat-header-row *matHeaderRowDef="['reorder', 'amount', 'name', 'notes', 'actions']"></tr>
+            <tr
+                mat-row
+                *matRowDef="let row; columns: ['reorder', 'amount', 'name', 'notes', 'actions']"
+                cdkDrag
+                [cdkDragData]="row"
+            ></tr>
+        </table>
+
+        <button matButton="outlined" (click)="addIngredient()" type="button">Add Ingredient</button>
+    </div>
 
     <h3>Images</h3>
     <button matButton="outlined" (click)="openImageUploadDialog()" type="button">Upload Image</button>