fix: style des composants inputs + affichage des hint/error/success (#25)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [x] TU/TI/TF rédigée
- [x] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #25
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/select/Select.vue

@@ -1,8 +1,9 @@
 <template>
-  <div
-    ref="root"
-    :class="mergedGroupClass"
-  >
+  <div>
+    <div
+      ref="root"
+      :class="mergedGroupClass"
+    >
     <button
       :id="buttonId"
       type="button"
@@ -133,21 +134,22 @@
         {{ opt.label || '\u00A0' }}
       </li>
     </ul>
+    </div>
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${buttonId}-describedby`"
+      :class="[
+        hasError
+          ? 'text-m-danger'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 ml-[2px] text-xs',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
   </div>
-  <p
-    v-if="hint || hasError || hasSuccess"
-    :id="`${buttonId}-describedby`"
-    :class="[
-      hasError
-        ? 'text-m-danger'
-        : hasSuccess
-          ? 'text-m-success'
-          : 'text-m-muted',
-      'mt-1 ml-[2px] text-xs',
-    ]"
-  >
-    {{ error || success || hint }}
-  </p>
 </template>
 
 <script setup lang="ts">
@@ -211,7 +213,7 @@ const normalizedOptions = computed<Option[]>(() => [
   ...props.options,
 ])
 const mergedGroupClass = computed(() =>
-  twMerge('relative mt-4 w-full', props.minWidth, props.maxWidth, props.groupClass),
+  twMerge('relative w-full', props.minWidth, props.maxWidth, props.groupClass),
 )
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)

app/components/malio/select/SelectCheckbox.vue

@@ -1,9 +1,10 @@
 <template>
-  <div
-    ref="root"
-    class="relative mt-4 w-full"
-    :class="[minWidth, maxWidth]"
-  >
+  <div>
+    <div
+      ref="root"
+      class="relative w-full"
+      :class="[minWidth, maxWidth]"
+    >
     <button
       :id="buttonId"
       type="button"
@@ -184,21 +185,22 @@
         />
       </li>
     </ul>
+    </div>
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${buttonId}-describedby`"
+      :class="[
+        hasError
+          ? 'text-m-danger'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 ml-[2px] text-xs',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
   </div>
-  <p
-    v-if="hint || hasError || hasSuccess"
-    :id="`${buttonId}-describedby`"
-    :class="[
-      hasError
-        ? 'text-m-danger'
-        : hasSuccess
-          ? 'text-m-success'
-          : 'text-m-muted',
-      'mt-1 ml-[2px] text-xs',
-    ]"
-  >
-    {{ error || success || hint }}
-  </p>
 </template>
 
 <script setup lang="ts">