Fix mobile

This commit is contained in:
eraden 2024-11-17 20:36:29 +01:00
parent 0499c71fbb
commit 1171675ee3
2 changed files with 13 additions and 5 deletions

View File

@ -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;
}

View File

@ -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 %}