From 1171675ee3cae1a36922b6105efc67d603e6328a Mon Sep 17 00:00:00 2001
From: eraden <adrian.wozniak@ita-prog.pl>
Date: Sun, 17 Nov 2024 20:36:29 +0100
Subject: [PATCH] Fix mobile

---
 cooked/assets/styles.css             |  8 ++++++++
 cooked/templates/recipies/show.jinja | 10 +++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/cooked/assets/styles.css b/cooked/assets/styles.css
index 534a9e9..4e2bca3 100644
--- a/cooked/assets/styles.css
+++ b/cooked/assets/styles.css
@@ -2429,6 +2429,10 @@ details.collapse summary::-webkit-details-marker{
   list-style-type: disc;
 }
 
+.flex-row{
+  flex-direction: row;
+}
+
 .flex-col{
   flex-direction: column;
 }
@@ -2477,6 +2481,10 @@ details.collapse summary::-webkit-details-marker{
   gap: 2rem;
 }
 
+.text-nowrap{
+  text-wrap: nowrap;
+}
+
 .rounded-full{
   border-radius: 9999px;
 }
diff --git a/cooked/templates/recipies/show.jinja b/cooked/templates/recipies/show.jinja
index bfb9180..d7863b7 100644
--- a/cooked/templates/recipies/show.jinja
+++ b/cooked/templates/recipies/show.jinja
@@ -1,7 +1,7 @@
 {% extends "base.jinja" %}
 
 {% block content %}
-<main class="m-4 flex flex-col gap-4 w-full">
+<main class="p-4 flex flex-col gap-4 w-full">
     {% include "../top_bar.jinja" %}
 
     <div class="sm:rounded-3xl w-full flex flex-col gap-4">
@@ -67,9 +67,9 @@
             <p class="text-desktop-heading-m">
                 Tags
             </p>
-            <div class="flex gap-7">
+            <div class="flex gap-7 flex-wrap">
             {% for tag in tags %}
-            <a class="bg-gray-300 dark:bg-gray-700 text-base text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-400 dark:hover:bg-gray-600 flex justify-center items-center" href="/tags/{{tag.id}}">
+            <a class="bg-gray-300 dark:bg-gray-700 text-base text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-400 dark:hover:bg-gray-600 flex justify-center items-center text-nowrap" href="/tags/{{tag.id}}">
                     {{ tag.name }}
                 </a>
             {% endfor %}
@@ -80,9 +80,9 @@
             <p class="text-desktop-heading-m">
                 Ingredients
             </p>
-            <div class="flex gap-7">
+            <div class="flex gap-7 flex-wrap flex-row">
             {% for ingredient in ingredients %}
-                <a class="bg-gray-300 dark:bg-gray-700 text-base text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-400 dark:hover:bg-gray-600 flex justify-center items-center" href="/ingredients/{{ingredient.id}}">
+                <a class="bg-gray-300 dark:bg-gray-700 text-base text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-400 dark:hover:bg-gray-600 flex justify-center items-center text-nowrap" href="/ingredients/{{ingredient.id}}">
                     {{ ingredient.name }}
                 </a>
             {% endfor %}