Update styling on recipe page

The styling classes applied on the recipe page have been updated to improve layout responsiveness. Specifically, the classes for the Bottom Bar Container and the Badges/Tags elements have been modified to better accommodate various screen sizes.

src/pages/recipes/[...slug].astro

@@ -189,10 +189,10 @@ if (entry === undefined) {
   </div>
   <!-- Bottom Bar Container -->
   <div
-    class="mx-auto grid max-w-screen-lg gap-y-5 lg:flex lg:items-center lg:justify-between lg:gap-y-0"
+      class="mx-auto grid max-w-screen-lg gap-y-5 sm:flex sm:items-center sm:justify-between sm:gap-y-0"
   >
     <!-- Badges/Tags -->
-    <div class="space-x-2.5">
+    <div class="flex flex-wrap gap-x-2 gap-y-1 sm:gap-y-0 sm:flex-nowrap sm:items-center">
       <Tags tags={entry.data.tags} />
     </div>