Ch 99 fix plastic balls placement on search page

src/features/recipes/components/feature-of-the-day/feature-of-the-day.jsx

@@ -7,15 +7,15 @@ export const FeatureOfTheDay = () => {
 
   const handleNavigate = () => navigate("/recipes/3194");
   return (
-    <div className="w-full pt-10 mx-auto h-1/2">
+    <div className="w-full mx-auto h-1/2">
       <Heading
         level="h1"
         variant="watermelon"
         className="text-center underline decoration-dashed decoration-tangerine-400 underline-offset-[24px]"
       >
         Recipe of the day
       </Heading>
-      <div className="flex flex-col items-center justify-center px-4 py-6 space-x-6 lg:flex-row">
+      <div className="flex flex-col items-center justify-center px-4 py-6 lg:space-x-6 lg:flex-row">
         <img
           src={FeatureChickenRecipe}
           className="object-contain w-64 rounded-2xl"
@@ -33,7 +33,7 @@ export const FeatureOfTheDay = () => {
           <Button
             variant="primary"
             size="large"
-            className="w-1/2 mt-4"
+            className="w-full mt-4 lg:w-1/2"
             onClick={handleNavigate}
           >
             See the Recipe

src/features/recipes/components/recipe-card/recipe-card.jsx

@@ -10,22 +10,22 @@ export const RecipeCard = ({
   id,
 }) => {
   return (
-    <div className="transition duration-500 bg-white shadow-md w-72 h-72 lg:w-96 hover:shsadow-xl rounded-2xl tranform hover:scale-105">
+    <div className="w-full transition duration-500 bg-white shadow-md h-fit md:h-80 hover:shadow-xl rounded-2xl tranform hover:scale-105">
       <Link to={`/recipes/${id}`}>
         <img
           src={thumbnail_url}
           alt={thumbnail_alt_text}
-          className="object-cover object-center h-48 w-72 lg:w-96 rounded-t-2xl"
+          className="object-cover object-center w-full h-48 rounded-t-2xl"
         />
-        <div className="py-3 mx-auto w-72 lg:w-80">
+        <div className="w-full p-3 mx-auto">
           <Heading
             level="h4"
             variant="lava"
-            className="tracking-tighter truncate"
+            className="tracking-tighter break-words"
           >
             {name}
           </Heading>
-          <div className="flex justify-between">
+          <div className="flex flex-wrap justify-between">
             <p className="text-1">{`${num_servings} serving(s)`}</p>
             <div>
               <StarRating {...user_ratings} />

src/features/recipes/components/recipe-list/recipe-list.jsx

@@ -29,7 +29,7 @@ export const RecipeList = ({ searchTerm }) => {
   }
 
   return (
-    <div className="grid justify-center grid-cols-1 mx-auto mt-5 mb-10 gap-x-10 gap-y-12 justify-items-center md:grid-cols-2 w-fit auto-rows-fr lg:grid-cols-3">
+    <div className="grid justify-center w-full grid-cols-1 gap-12 mx-auto mt-5 mb-10 md:gap-10 justify-items-center md:grid-cols-2 auto-rows-fr lg:grid-cols-3">
       {recipes.results.map((recipe) => (
         <RecipeCard key={recipe.id} {...recipe} />
       ))}

src/pages/Search.jsx

@@ -29,19 +29,19 @@ const Search = () => {
         <Heading level="h2" variant="watermelon" className="text-center">
           YumYum Time!!
         </Heading>
-        <div className="flex flex-wrap mx-auto my-5 gap-y-5 justify-evenly lg:justify-around">
-          <div className="flex items-center w-1/3 lg:w-1/4">
+        <div className="flex flex-wrap items-center my-5 lg:mx-2 lg:gap-x-2">
+          <div className="flex items-center w-1/3 lg:w-[20%]">
             <BellPeppers resolution="360" alt="bell-peppers" />
           </div>
-          <div className="flex flex-col items-center justify-center order-last lg:order-1">
+          <div className="flex flex-col items-center order-last max-w-md lg:order-1">
             <p className="text-2xl font-bold tracking-tight text-center break-words lg:w-2/3 font-kalam lava-text-gradient">
               Add Ingredients Here and We Will Do Our Magic!
             </p>
             <div className="w-full mx-auto my-4">
               <SearchBox searchTerm={searchTerm} onSearch={handleSearch} />
             </div>
           </div>
-          <div className="flex items-center justify-center w-1/3 lg:w-1/4 hero-yumi lg:order-last lg:justify-start">
+          <div className="flex items-center justify-center w-1/3 lg:w-[20%] hero-yumi lg:order-last lg:justify-start">
             <YumiWithSpoon
               resolution="480"
               alt="Yumi Character"
@@ -54,20 +54,14 @@ const Search = () => {
         ) : (
           <FeatureOfTheDay />
         )}
-        <div className="absolute z-0 w-full h-full pointer-events-none left-10 bg-colored-balls-top xl:top-28 md:top-16 top-8">
+        <div className="absolute z-0 w-full h-full pointer-events-none left-10 bg-colored-balls-top xl:top-32 md:top-16 top-8">
           {/* Yellow Ball 1 */}
           <div className="w-[18px] h-[18px] md:w-[48px] md:h-[48px] md:left-[15%] md:top-[10%] 2xl:left-[30%] xl:w-[56.56px] xl:h-[56.56px]  2xl:w-[62px] 2xl:h-[62px] bg-YellowBall bg-cover relative  rounded-full left-[13%] top-[8%] " />
           {/* Orange Ball */}
           <div className="w-[12px] h-[12px] md:w-[34.09px] md:h-[34.09px]  xl:w-[44.44px] xl:h-[44.44px]  md:top-[5%] md:left-[40%] 2xl:left-[56%]  bg-OrangeBall bg-cover rounded-full relative left-[58%]  top-[8%]   " />
           {/* Green Ball */}
           <div className="w-[12px] h-[12px] md:w-[34.09px] md:h-[34.09px]  xl:w-[44.44px] xl:h-[44.44px]  md:top-[5%] md:left-[80%] 2xl:left-[70%]  bg-GreenBall bg-cover rounded-full relative left-[8%]  top-[10%]   " />
         </div>
-        <div className="absolute z-0 w-full h-full pointer-events-none bg-colored-balls-top xl:top-[40%] md:top-[40%] top-[48%]">
-          {/* Yellow Ball 2 */}
-          <div className="w-[24px] h-[24px] md:w-[48px] md:h-[48px] md:left-[4%] md:top-[56%] 2xl:left-[-2%] xl:w-[56.56px] xl:h-[56.56px]  2xl:w-[62px] 2xl:h-[62px] bg-YellowBall bg-cover relative  rounded-full left-[3%] top-[12%] " />
-          {/* Green Ball 2 */}
-          <div className="w-[12px] h-[12px] md:w-[34.09px] md:h-[34.09px]  xl:w-[44.44px] xl:h-[44.44px]  md:top-[10%] md:left-[50%] 2xl:left-[56%]  bg-GreenBall bg-cover rounded-full relative left-[78%]  top-[33%]   " />
-        </div>
       </div>
     </div>
   );

src/styles/global.css

@@ -159,5 +159,5 @@ h6.font-display {
   font-family: var(--font-open-sans);
 }
 .text-no-stroke {
-  -webkit-text-stroke:  0px ; 
+  -webkit-text-stroke: 0px;
 }