fix: switch help text (#444)

Author: lukasvinclav

src/unfold/static/unfold/css/styles.css

@@ -19,8 +19,18 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
                 {% for field in line %}
                     <div class="flex group {% if field.errors %}errors {% endif %}{% if not line.fields|length == 1 %}lg:max-w-xs w-full {% endif %}{% if not forloop.parentloop.last %} mb-6 {% else %} mb-3{% endif %} {% if row %}flex-row items-center{% else %}flex-col{% endif %}">
                         {% if field.is_checkbox %}
-                            <div class="flex flex-row items-center">
-                                {{ field.field }}{{ field.label_tag }}
+                            <div class="flex flex-row">
+                                {{ field.field }}
+
+                                <div class="flex flex-col">
+                                    {{ field.label_tag }}
+
+                                    {% if field.field.help_text %}
+                                        <div class="ml-2 -mt-1">
+                                            {% include "unfold/helpers/help_text.html" with help_text=field.field.help_text %}
+                                        </div>
+                                    {% endif %}
+                                </div>
                             </div>
                         {% else %}
                             <div class="{% if row %} w-48{% endif %}">
@@ -40,7 +50,7 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
                             </span>
                         {% endif %}
 
-                        {% if field.field.help_text %}
+                        {% if field.field.help_text and not field.is_checkbox %}
                             {% include "unfold/helpers/help_text.html" with help_text=field.field.help_text %}
                         {% endif %}
                     </div>

src/unfold/templates/admin/includes/fieldset.html

@@ -1,6 +1,6 @@
 <span class="flex gap-4 items-center">
     {% if value.3 and value.3.path %}
-        <span class="bg-center bg-cover bg-white flex font-medium justify-center overflow-hidden dark:bg-gray-900 dark:border-gray-700 {% if value.3.squared %}rounded-sm{% else %}rounded-full{% endif %}{% if not value.3.borderless %} border{% endif %}{% if not value.3.width or not value.3.height %}h-8 max-w-8 min-w-8{% endif %}">
+        <span class="bg-center bg-cover bg-white flex font-medium justify-center overflow-hidden dark:bg-gray-900 dark:border-gray-700 {% if value.3.squared %}rounded-sm{% else %}rounded-full{% endif %}{% if not value.3.borderless %} border{% endif %}{% if not value.3.width or not value.3.height %} h-8 max-w-8 min-w-8{% endif %}">
             <img loading="lazy" src="{{ value.3.path }}" class="object-cover" {% if value.3.width %}width="{{ value.3.width }}"{% endif %} {% if value.3.height %}height="{{ value.3.height }}"{% endif %}/>
         </span>
     {% elif value.2 %}