fix: mobile adjustments

Author: adinhodovic

django_wtf/templates/core/search.html

@@ -1,7 +1,7 @@
 {% extends "core/base.html" %}
 {% block content %}
-    <div class="mb-5 w-full flex-col content-center self-center lg:mt-5 lg:flex lg:w-7/12">
-        <form class="form flex justify-between">
+    <div class="mb-5 flex-col self-center w-11/12 lg:mt-5 lg:flex lg:w-7/12">
+        <form class="form lg:flex lg:justify-between">
             <label class="form-control">
                 <div class="label">
                     <span class="label-text">Search</span>
@@ -14,7 +14,7 @@
                        hx-push-url="true"
                        hx-target="#search_table"
                        hx-trigger="keyup changed delay:0.5s"
-                       class="input input-bordered input-sm min-w-64" />
+                       class="input input-bordered min-w-64" />
             </label>
             <div class="flex gap-4">
                 <label class="form-control">
@@ -39,6 +39,6 @@
                 </label>
             </div>
         </form>
-        <div id="search_table" class="table table-sm mt-7">{% include "core/search_table.html" %}</div>
+        <div id="search_table" class="mt-7">{% include "core/search_table.html" %}</div>
     </div>
 {% endblock content %}

django_wtf/templates/core/search_table.html

@@ -11,12 +11,12 @@ <h2 class="flex justify-between card-title">
                             <span class="text-sm">⭐ {{ object.stars }}</span>
                         </h2>
                     </a>
-                    <p>
+                    <div class="flex flex-wrap gap-2">
                         {% for topic in object.topics|slice:"0:5" %}
-                            <a class="p-3 mr-1 text-xs badge badge-outline hover:brightness-125"
+                            <a class="text-xs badge badge-outline hover:brightness-125"
                                href="{% url 'core:search' %}?q={{ topic }}">{{ topic|truncatechars:30 }}</a>
                         {% endfor %}
-                    </p>
+                    </div>
                     <p class="mt-2">{{ object.description }}</p>
                 </div>
             </div>