Misc fixes

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

@@ -11,17 +11,21 @@ export const FeatureOfTheDay = () => {
       <Heading
         level="h1"
         variant="watermelon"
-        className="text-center underline decoration-dashed decoration-tangerine-400 underline-offset-[24px]"
+        className="text-center underline decoration-dashed decoration-tangerine-400 underline-offset-[24px] balance"
       >
         Recipe of the day
       </Heading>
       <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"
+          className="object-contain w-64 rounded-2xl mb-8"
         />
         <div className="flex flex-col max-w-lg text-left">
-          <Heading level="h3" variant="tangerine" className="tracking-tight">
+          <Heading
+            level="h3"
+            variant="tangerine"
+            className="tracking-tight balance"
+          >
             Roasted Chicken And Sweet Potatoes Recipe
           </Heading>
           <p className="tracking-tight font-rasa">
@@ -33,10 +37,10 @@ export const FeatureOfTheDay = () => {
           <Button
             variant="primary"
             size="large"
-            className="w-full mt-4 lg:w-1/2"
+            className="w-full mt-4 lg:w-1/2 mb-10"
             onClick={handleNavigate}
           >
-            See the Recipe
+            <span className="align-center w-full">See the Recipe</span>
             <Icon name="right-arrow" className="transform scale-125" />
           </Button>
         </div>

src/features/recipes/components/recipe-details/Description.jsx

@@ -31,7 +31,7 @@ export const Description = ({ description }) => {
   const body = words.slice(titleLength).join(" ");
   console.log("body length:", body.length);
   return description ? (
-    <div className="description pr-8 pt-2 pl-20">
+    <div className="description px-8 pt-2 md:pl-20">
       <Heading level="h2" variant="lava" className="leading-none">
         <span className={title.length > 10 ? "text-clamp-h3" : ""}>
           {title}

src/features/recipes/components/recipe-details/IntroCard.jsx

@@ -10,7 +10,7 @@ export const IntroCard = ({ name, imageUrl, description }) => {
         <div className="absolute left-0 top-0 z-0 h-full overflow-hidden rounded-tl-[1rem] pt-[20rem] md:pt-0">
           <PlantsTL
             resolution="128"
-            className="select-none pointer-events-none block h-full w-[8rem] lg:w-[8rem] overflow-hidden lg:rounded-tl-[1rem]"
+            className="pointer-events-none hidden h-full w-[8rem] select-none overflow-hidden md:block lg:w-[8rem] lg:rounded-tl-[1rem]"
           />
         </div>
         <div className="intro-wrapper relative flex-row-reverse gap-4 md:flex">
@@ -30,7 +30,7 @@ export const IntroCard = ({ name, imageUrl, description }) => {
       </Card>
     );
   return (
-    <div className="picture-wrapper md:col-start-1 md:col-end-13 md:row-start-3 lg:col-start-5 lg:row-start-1 2xl:col-start-4 overflow-hidden rounded-xl">
+    <div className="picture-wrapper overflow-hidden rounded-xl md:col-start-1 md:col-end-13 md:row-start-3 lg:col-start-5 lg:row-start-1 2xl:col-start-4">
       <picture className="w-full">
         <img
           src={imageUrl}

src/features/recipes/components/recipe-details/RecipeDetails.jsx

@@ -26,7 +26,7 @@ export const RecipeDetails = ({ recipe }) => {
         <hr className="mb-1 mt-3 h-2 w-[40%] rounded-full border-none bg-gradient-tangerine-diagonal" />
       </div>
 
-      <div className="p-5 page-body md:p-8 xl:p-10 md:grid md:grid-cols-12 md:grid-rows-10 md:gap-10">
+      <div className="page-body p-5 md:p-8 xl:p-10 md:grid md:grid-cols-12 md:grid-rows-10 md:gap-10">
         <IntroCard
           description={recipe.description}
           imageUrl={recipe.thumbnail_url}
@@ -53,9 +53,7 @@ export const RecipeDetails = ({ recipe }) => {
           renditions={recipe.renditions}
           className="mb-12 outline-4 md:col-start-7 md:col-end-13 md:row-start-1 lg:col-start-1 lg:col-end-5 lg:row-start-3 lg:-mx-4 lg:-mb-4 2xl:col-end-4"
         />
-        <Card className="flex items-center difficulty-card md:col-start-7 md:col-end-13 md:row-start-2 lg:col-start-5 2xl:col-start-4">
-          <RecipeDifficultyCard tags={recipe.tags} />
-        </Card>
+        <RecipeDifficultyCard tags={recipe.tags} />
         <Card
           className="ingredients-card md:col-start-1 md:col-end-13 lg:col-start-5 lg:col-end-13 lg:row-span-2 2xl:col-start-4"
           id="ingredients"

src/features/recipes/components/recipe-details/RecipeDifficultyCard.jsx

@@ -1,6 +1,7 @@
 import PropTypes from "prop-types";
 import ChefCarrots from "@/assets/brand/chef-carrots/ChefCarrots";
 import RecipeDifficultyDetail from "./RecipeDifficultyDetail";
+import { Card } from "./Card";
 
 export const RecipeDifficultyCard = ({ tags }) => {
   // Available cards:
@@ -28,31 +29,39 @@ export const RecipeDifficultyCard = ({ tags }) => {
     (tag) => tag.type === "difficulty" && tag.name === "5_ingredients_or_less",
   );
   return (
-    <div className="relative flex min-h-[6rem] sm:justify-center pl-28 md:pl-[5rem] align-middle">
-      <ChefCarrots
-        resolution="180"
-        className="pointer-events-none select-none w-36 h-56 md:h-auto max-w-[55%] md:bottom-[-3.75rem] md:left-[-4rem] -bottom-6 -left-4 absolute overflow-hidden"
-      />
-      <div className="difficulty-card-wrapper flex flex-col sm:items-center md:items-start lg:items-center sm:flex-row md:flex-col lg:flex-row">
-        {easy && (
-          <RecipeDifficultyDetail
-            title="Easy"
-            icon="easy"
-            text="You've got this!"
+    (easy || quickText || simple) && (
+      <Card className="difficulty-card md:col-start-7 md:col-end-13 md:row-start-2 lg:col-start-5 2xl:col-start-4 flex items-center">
+        <div className="relative flex min-h-[6rem] sm:justify-center pl-28 md:pl-[5rem] align-middle">
+          <ChefCarrots
+            resolution="180"
+            className="pointer-events-none select-none w-36 h-56 md:h-auto max-w-[55%] md:bottom-[-3.75rem] md:left-[-4rem] -bottom-6 -left-4 absolute overflow-hidden"
           />
-        )}
-        {quickText && (
-          <RecipeDifficultyDetail title="Quick" icon="clock" text={quickText} />
-        )}
-        {simple && (
-          <RecipeDifficultyDetail
-            title="Simple"
-            icon="stars"
-            text="5 Ingredients or Less"
-          />
-        )}
-      </div>
-    </div>
+          <div className="difficulty-card-wrapper flex flex-col sm:items-center md:items-start lg:items-center sm:flex-row md:flex-col lg:flex-row">
+            {easy && (
+              <RecipeDifficultyDetail
+                title="Easy"
+                icon="easy"
+                text="You've got this!"
+              />
+            )}
+            {quickText && (
+              <RecipeDifficultyDetail
+                title="Quick"
+                icon="clock"
+                text={quickText}
+              />
+            )}
+            {simple && (
+              <RecipeDifficultyDetail
+                title="Simple"
+                icon="stars"
+                text="5 Ingredients or Less"
+              />
+            )}
+          </div>
+        </div>
+      </Card>
+    )
   );
 };
 

src/features/recipes/components/recipe-details/Tags.jsx

@@ -18,8 +18,8 @@ export const Tags = ({ tags }) => {
         return (
           <span key={tag.name}>
             <Link
-              to={`/search?q=${tag.name}`}
-              className="text-watermelon font-bold decoration-tangerine decoration-2 underline-offset-2 hover:underline"
+              to={`/search?q=${tag.display_name}`}
+              className="font-bold text-watermelon decoration-tangerine decoration-2 underline-offset-2 hover:underline"
               key={tag.name + String(Math.random())}
             >
               {tag.display_name}

src/features/recipes/components/recipe-details/Tips.jsx

@@ -26,7 +26,7 @@ export const Tips = ({ recipeId }) => {
       showIndicators={true}
       dynamicHeight={false}
       stopOnHover={true}
-      className="bg-transparent mx-[-2.25rem] [&_.carousel-slider]:overflow-visible [&_.control-dots]:bottom-[-2rem]"
+      className="bg-transparent mx-[-2.25rem] [&_.carousel-slider]:overflow-visible [&_.control-dots]:bottom-[-2rem] [&_.control-dots]:px-6"
     >
       {tips.map((tip) => (
         <div key={tip.tip_id}>
@@ -58,7 +58,7 @@ const TipCard = ({
   return (
     <div className="flex flex-col w-full p-5 cursor-pointer">
       <div className="flex items-center gap-2">
-        <div>
+        <div className="w-6">
           <img
             src={author_avatar_url}
             className="object-cover w-6 h-6 rounded-full"

src/pages/Search.jsx

@@ -31,7 +31,7 @@ const Search = () => {
       >
         YumYum Time!!
       </Heading>
-      <SvgComponent className="w-full fill-sky-300" />
+      <SvgComponent className="w-full fill-sky-300 -mb-1" />
       <div className="flex flex-col flex-shrink-0 w-full px-4 lg:px-20 bg-gradient-Search">
         <div className="flex flex-wrap items-center justify-center my-5 lg:mx-2 lg:gap-x-2">
           <div className="flex items-center w-1/3 lg:w-[20%]">