Merge pull request '(FIX): Fixed the description display issue.' (#72) from fix/description into master

Reviewed-on: #72

web/.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 .env
+.vite

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} />