From 5e850d81274041e94b38accf2974e5006846c186 Mon Sep 17 00:00:00 2001
From: Hayden Hargreaves <hhargreaves2006@gmail.com>
Date: Fri, 9 Jan 2026 19:34:55 -0700
Subject: [PATCH] (FIX): Fixed the description display issue.

---
 web/.gitignore           | 1 +
 web/src/pages/Recipe.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/.gitignore b/web/.gitignore
index 50c8dda..9cbe4da 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 .env
+.vite
diff --git a/web/src/pages/Recipe.tsx b/web/src/pages/Recipe.tsx
index 0ff0dfb..08aad9a 100644
--- a/web/src/pages/Recipe.tsx
+++ b/web/src/pages/Recipe.tsx
@@ -57,6 +57,10 @@ export default function RecipePage() {
       console.error(error);
   }, [error]);
 
+  useEffect(() => {
+    console.log(recipe?.Description);
+  }, [recipe]);
+
   return recipe ? (
     <>
       <img className="bg-gray-100 w-full h-64 md:h-96 mx-auto mb-8" src={RecipePlaceholder} />
@@ -73,7 +77,7 @@ export default function RecipePage() {
       </section>
       <div className="px-4 py-8 md:px-8">
         <h3 className="text-xl text-gray-800 font-semibold mb-2">About this recipe</h3>
-        <p className="text-gray-700">{recipe.Description}</p>
+        <p className="text-gray-700 whitespace-pre-line wrap-break-word">{recipe.Description}</p>
       </div>
       <IngredientList sections={recipe.Sections} ingredients={recipe.Ingredients} />
       <InstructionList instructions={recipe.Instructions} />
-- 
2.47.2