fix margins, text wrap

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,

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>

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}

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>

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

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>
   </>
 );