From 22ff70d91378bc41734453219cedd514219fdb88 Mon Sep 17 00:00:00 2001
From: Thomas Lamant <tom@tmlmt.com>
Date: Sun, 25 Oct 2026 22:32:21 +0100
Subject: [PATCH] fix(playground): remove space between ingredient name and
 comma before preparation

---
 .../app/components/recipe/IngredientItem.vue  | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/playground/app/components/recipe/IngredientItem.vue b/playground/app/components/recipe/IngredientItem.vue
index df8c6e31..0e766d43 100644
--- a/playground/app/components/recipe/IngredientItem.vue
+++ b/playground/app/components/recipe/IngredientItem.vue
@@ -8,8 +8,7 @@ import type {
 import { isAndGroup, isSimpleGroup, hasAlternatives } from "cooklang-parser";
 
 type IngredientQuantityEntry =
-  | IngredientQuantityGroup
-  | IngredientQuantityAndGroup;
+  IngredientQuantityGroup | IngredientQuantityAndGroup;
 
 const props = defineProps<{
   ingredient: Ingredient;
@@ -105,8 +104,7 @@ const displayMode = computed<DisplayMode>(() => {
       <span
         v-if="ingredient.preparation"
         class="text-gray-500 dark:text-gray-300"
-      >
-        , {{ ingredient.preparation }}
+        >, {{ ingredient.preparation }}
       </span>
     </template>
 
@@ -130,8 +128,7 @@ const displayMode = computed<DisplayMode>(() => {
       <span
         v-if="ingredient.preparation"
         class="text-gray-500 dark:text-gray-300"
-      >
-        , {{ ingredient.preparation }}
+        >, {{ ingredient.preparation }}
       </span>
     </template>
 
@@ -179,8 +176,7 @@ const displayMode = computed<DisplayMode>(() => {
       <span
         v-if="ingredient.preparation"
         class="text-gray-500 dark:text-gray-300"
-      >
-        , {{ ingredient.preparation }}
+        >, {{ ingredient.preparation }}
       </span>
       <span class="text-gray-500 dark:text-gray-300">
         {{ " " }}(or
@@ -244,8 +240,7 @@ const displayMode = computed<DisplayMode>(() => {
       <span
         v-if="ingredient.preparation"
         class="text-gray-500 dark:text-gray-300"
-      >
-        , {{ ingredient.preparation }}
+        >, {{ ingredient.preparation }}
       </span>
     </template>
 
@@ -292,8 +287,7 @@ const displayMode = computed<DisplayMode>(() => {
           <span
             v-if="ingredient.preparation"
             class="text-gray-500 dark:text-gray-300"
-          >
-            , {{ ingredient.preparation }}
+            >, {{ ingredient.preparation }}
           </span>
 
           <!-- Show alternatives if present -->
@@ -336,8 +330,7 @@ const displayMode = computed<DisplayMode>(() => {
       <span
         v-if="ingredient.preparation"
         class="text-gray-500 dark:text-gray-300"
-      >
-        , {{ ingredient.preparation }}
+        >, {{ ingredient.preparation }}
       </span>
     </template>
   </li>