fix: closeDialog toegevoegd in showPortieEditDialog — bottom sheet sluit nu correct

Root cause: showPortieEditDialog (r.3217-3401) gebruikte closeDialog op 3 plekken
(r.3279 X-kruisje, r.3280 buiten-klik, r.3348 save) maar definieerde de functie
nergens. showBulkPortieEdit (r.3462-3465) had wél een closeDialog definitie.

Fix: closeDialog definitie toegevoegd met closing-animatie + delayed overlay removal.
E2e test toegevoegd voor single-ingredient portie wijzigen + opslaan scenario.

Kanban: t_044470e2

docker/index.html

@@ -3276,6 +3276,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
     document.body.appendChild(overlay);
     document.body.style.overflow = 'hidden';
 
+    function closeDialog() {
+      overlay.classList.add('closing');
+      setTimeout(() => { overlay.remove(); document.body.style.overflow = ''; }, 280);
+    }
     overlay.querySelector('#portieEditClose').addEventListener('click', closeDialog);
     overlay.addEventListener('click', (e) => { if (e.target === overlay) closeDialog(); });
 

index.html

@@ -3276,6 +3276,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
     document.body.appendChild(overlay);
     document.body.style.overflow = 'hidden';
 
+    function closeDialog() {
+      overlay.classList.add('closing');
+      setTimeout(() => { overlay.remove(); document.body.style.overflow = ''; }, 280);
+    }
     overlay.querySelector('#portieEditClose').addEventListener('click', closeDialog);
     overlay.addEventListener('click', (e) => { if (e.target === overlay) closeDialog(); });
 

tests/e2e.spec.js

@@ -393,4 +393,48 @@ test.describe('Karby Eetdagboek', () => {
     }
   });
 
+  test('portie-edit dialog: single ingredient portion change saves and closes', async ({ page }) => {
+    // Add a loose ingredient to the diary first
+    await page.goto(BASE);
+    await page.locator('.search-input').fill('brood');
+    await page.waitForTimeout(800);
+    await page.locator('.food-item').first().click();
+    await page.waitForTimeout(500);
+
+    // Click "Toevoegen aan eetmoment" → opens addMealModal
+    await page.locator('#detailAddBtn').click();
+    await page.waitForTimeout(500);
+
+    // Confirm adding to diary (default portie=100g, default eetmoment)
+    await page.locator('#addMealSubmit').click();
+    await page.waitForTimeout(800);
+
+    // Should now be on dagboek tab
+    // Find the portion display for a single ingredient (no data-mi attribute)
+    const portionSpan = page.locator('[data-action="edit-portie"]:not([data-mi])').first();
+    await expect(portionSpan).toBeVisible({ timeout: 5000 });
+    await portionSpan.click();
+    await page.waitForTimeout(500);
+
+    // Verify the portion edit dialog opened
+    const editInput = page.locator('#portieEditInput');
+    await expect(editInput).toBeVisible({ timeout: 3000 });
+
+    // Verify preview shows initial carbs
+    const preview = page.locator('#portieEditPreview');
+    await expect(preview).toBeVisible();
+
+    // Change the portion to 200g
+    await editInput.fill('200');
+    await editInput.dispatchEvent('input');
+    await page.waitForTimeout(300);
+
+    // Click save
+    await page.locator('#portieSaveBtn').click();
+    await page.waitForTimeout(500);
+
+    // Dialog should be gone (removed from DOM after closing animation)
+    await expect(page.locator('#portieEditInput')).not.toBeAttached({ timeout: 3000 });
+  });
+
 });