From 9f7d74aecf0e87ecbdb8760bbceebc6f4f5d5dbe Mon Sep 17 00:00:00 2001
From: Bart Kummel <bart@leap.ac>
Date: Thu, 13 Jun 2024 15:04:45 +0200
Subject: [PATCH] fix: Make fractions in the ingredient list look a tiny bit
 nicer (#3725)

---
 .../Domain/Recipe/RecipeIngredientListItem.vue   | 16 ++++++++++++++++
 .../recipes/use-recipe-ingredients.test.ts       |  4 ++--
 .../recipes/use-recipe-ingredients.ts            |  2 +-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
index 0e16277fbb3d..0b775a4b79cf 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
@@ -45,6 +45,22 @@ export default defineComponent({
   .d-inline {
     & > p {
       display: inline;
+      &:has(>sub)>sup {
+        letter-spacing: -0.05rem;
+      }
+    }
+    &:has(sub) {
+      &:after {
+        letter-spacing: -0.2rem;
+      }
+    }
+    sup {
+      &+span{
+        letter-spacing: -0.05rem;
+      }
+      &:before {
+        letter-spacing: 0rem;
+      }
     }
   }
 
diff --git a/frontend/composables/recipes/use-recipe-ingredients.test.ts b/frontend/composables/recipes/use-recipe-ingredients.test.ts
index b84a68741631..4b6a93869f7a 100644
--- a/frontend/composables/recipes/use-recipe-ingredients.test.ts
+++ b/frontend/composables/recipes/use-recipe-ingredients.test.ts
@@ -31,13 +31,13 @@ describe(parseIngredientText.name, () => {
   test("ingredient text with fraction", () => {
     const ingredient = createRecipeIngredient({ quantity: 1.5, unit: { fraction: true, id: "1", name: "cup" } });
 
-    expect(parseIngredientText(ingredient, false, 1, true)).contain("1 <sup>1</sup>").and.to.contain("<sub>2</sub>");
+    expect(parseIngredientText(ingredient, false, 1, true)).contain("1<sup>1</sup>").and.to.contain("<sub>2</sub>");
   });
 
   test("ingredient text with fraction when unit is null", () => {
     const ingredient = createRecipeIngredient({ quantity: 1.5, unit: undefined });
 
-    expect(parseIngredientText(ingredient, false, 1, true)).contain("1 <sup>1</sup>").and.to.contain("<sub>2</sub>");
+    expect(parseIngredientText(ingredient, false, 1, true)).contain("1<sup>1</sup>").and.to.contain("<sub>2</sub>");
   });
 
   test("ingredient text with fraction no formatting", () => {
diff --git a/frontend/composables/recipes/use-recipe-ingredients.ts b/frontend/composables/recipes/use-recipe-ingredients.ts
index ae228ef6472c..e6d1256f78f6 100644
--- a/frontend/composables/recipes/use-recipe-ingredients.ts
+++ b/frontend/composables/recipes/use-recipe-ingredients.ts
@@ -63,7 +63,7 @@ export function useParsedIngredientText(ingredient: RecipeIngredient, disableAmo
 
       if (fraction[1] > 0) {
         returnQty += includeFormating ?
-          ` <sup>${fraction[1]}</sup>&frasl;<sub>${fraction[2]}</sub>` :
+          `<sup>${fraction[1]}</sup><span>&frasl;</span><sub>${fraction[2]}</sub>` :
           ` ${fraction[1]}/${fraction[2]}`;
       }
     }