From 3eb63e9b49a6e8cbc03edf79e04ce54e65e36587 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Wed, 27 Dec 2023 00:40:06 +0100
Subject: [PATCH] Fix layout of Checkbox and Checkboxes

---
 src/components/fields/Checkbox.vue   | 15 ++++++++-------
 src/components/fields/Checkboxes.vue |  6 +++---
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/fields/Checkbox.vue b/src/components/fields/Checkbox.vue
index 5d190e4..97e66c5 100644
--- a/src/components/fields/Checkbox.vue
+++ b/src/components/fields/Checkbox.vue
@@ -1,12 +1,14 @@
 <template>
     <div class="relative">
-        <div class="grid grid-cols-1 gap-2 mt-3">
-            <label :for="field.key" class="block relative flex items-center">
+        <div class="grid grid-cols-1 gap-2">
+            <label :for="field.key" class="p-0 block leading-none relative flex items-start">
                 <input :id="field.key" v-model="inner" type="checkbox" :name="field.key" class="peer absolute invisible" />
-                <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
-                <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span>
-                <span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="field.description"></span>
-                <span v-show="field.required" class="text-red-800 ml-1">*</span>
+                <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block top-0"></span>
+                <span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span>
+                <span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base">
+                    <span v-text="field.description"></span>
+                    <span v-show="field.required" class="text-red-800">*</span>
+                </span>
             </label>
         </div>
     </div>
@@ -14,7 +16,6 @@
 
 <script setup>
 import {computed} from 'vue';
-import FieldLabel from '../FieldLabel.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
diff --git a/src/components/fields/Checkboxes.vue b/src/components/fields/Checkboxes.vue
index 7fb5aaa..5228d75 100644
--- a/src/components/fields/Checkboxes.vue
+++ b/src/components/fields/Checkboxes.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="relative">
         <div class="grid grid-cols-1 gap-2 mt-3">
-            <label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`" class="block relative flex items-center">
+            <label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`" class="block relative flex items-start">
                 <input :id="`${field.key}-${index}`" v-model="inner" type="checkbox" :name="field.key" :value="option" class="peer absolute invisible" />
                 <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
-                <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span>
-                <span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
+                <span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block"></span>
+                <span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
             </label>
         </div>