From 728afa5fd0b4912bc0fb11f29f32d20b44f2a814 Mon Sep 17 00:00:00 2001
From: Piotr Garlej <garlej.p@gmail.com>
Date: Thu, 5 Feb 2026 22:13:57 +0100
Subject: [PATCH] fix margins, text wrap

---
 src/components/fragments/ingredientList.tsx | 4 ++--
 src/components/fragments/preparationBox.tsx | 2 +-
 src/components/fragments/recipeCard.tsx     | 2 +-
 src/components/fragments/recipeRow.tsx      | 4 +++-
 src/components/fragments/toolbar.tsx        | 2 +-
 src/components/hoc/layout.tsx               | 2 +-
 6 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/fragments/ingredientList.tsx b/src/components/fragments/ingredientList.tsx
index d19bac6..1210271 100644
--- a/src/components/fragments/ingredientList.tsx
+++ b/src/components/fragments/ingredientList.tsx
@@ -9,12 +9,12 @@ interface IngredientListProps {
 const IngredientList = ({ ingredients }: IngredientListProps) => {
   const { t } = useTranslation();
   return (
-    <div className="mx-5">
+    <div>
       <h3 className="font-bold text-2xl mb-3">{t("ingredients_head")}</h3>
       <div className="flex min-w-sm flex-col">
         {ingredients.map((ingredient, index) => {
           return (
-            <div className="mb-4 flex flex-row" key={index}>
+            <div className="mb-3 flex flex-row" key={index}>
               <div className="flex-3">{ingredient.title}</div>
               <div className="flex-1">{`${ingredient.amount || ""} ${toLower(
                 ingredient.unit,
diff --git a/src/components/fragments/preparationBox.tsx b/src/components/fragments/preparationBox.tsx
index 8216258..e2bf8f1 100644
--- a/src/components/fragments/preparationBox.tsx
+++ b/src/components/fragments/preparationBox.tsx
@@ -8,7 +8,7 @@ const PreparationBox = ({ preparation }: PreparationBoxProps) => {
   const { t } = useTranslation();
 
   return (
-    <div className="mx-2.5 my-0">
+    <div className="my-0">
       <h3 className="font-bold text-2xl mb-3">{t("preparation")}</h3>
       <p className="text-justify">{preparation}</p>
     </div>
diff --git a/src/components/fragments/recipeCard.tsx b/src/components/fragments/recipeCard.tsx
index 8411a46..53be012 100644
--- a/src/components/fragments/recipeCard.tsx
+++ b/src/components/fragments/recipeCard.tsx
@@ -20,7 +20,7 @@ const RecipeCard = ({ recipe }: RecipeCardProps) => {
           <FontAwesomeIcon icon={faClock} /> {recipe.time}&apos;
         </span>
       ) : null}
-      <div className="flex flex-col md:flex-row gap-12 mt-10 md:items-start items-center">
+      <div className="flex flex-col md:flex-row gap-12 mt-10 md:items-start items-stretch">
         {recipe.ingredients.length > 0 ? (
           <IngredientList ingredients={recipe.ingredients} />
         ) : null}
diff --git a/src/components/fragments/recipeRow.tsx b/src/components/fragments/recipeRow.tsx
index a251118..a41a354 100644
--- a/src/components/fragments/recipeRow.tsx
+++ b/src/components/fragments/recipeRow.tsx
@@ -11,7 +11,9 @@ interface RecipeRowProps {
 const RecipeRow = ({ title, time, categories, onClick }: RecipeRowProps) => {
   return (
     <TableRow onClick={onClick} className="cursor-pointer">
-      <TableCell>{title}</TableCell>
+      <TableCell className="text-wrap whitespace-break-spaces">
+        {title}
+      </TableCell>
       <TableCell>
         <CategoriesBar categories={categories} />
       </TableCell>
diff --git a/src/components/fragments/toolbar.tsx b/src/components/fragments/toolbar.tsx
index bf9184f..2d417a1 100644
--- a/src/components/fragments/toolbar.tsx
+++ b/src/components/fragments/toolbar.tsx
@@ -25,7 +25,7 @@ const Toolbar = () => {
   };
 
   return (
-    <div className="w-full flex flex-row py-2 px-15 justify-between h-8">
+    <div className="w-full flex flex-row py-2 px-2 md:px-15 justify-between h-8">
       <div className="flex flex-row gap-10">
         <BrandIcon />
         <Button
diff --git a/src/components/hoc/layout.tsx b/src/components/hoc/layout.tsx
index abe1851..335a538 100644
--- a/src/components/hoc/layout.tsx
+++ b/src/components/hoc/layout.tsx
@@ -4,7 +4,7 @@ import Toolbar from "../fragments/toolbar";
 const Layout: React.FC<PropsWithChildren> = ({ children }) => (
   <>
     <Toolbar />
-    <div className="mt-10 px-2.5 md:px-20 lg:px-40">{children}</div>
+    <div className="mt-10 px-3 md:px-15 lg:px-40">{children}</div>
   </>
 );