feat: ajout du composant datatable sur tous les écrans (!48)

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

## Description de la PR

## Modification du .env

## Check list

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

Reviewed-on: #48
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

frontend/components/ui/UiSelect.vue

@@ -13,15 +13,16 @@
             :value="modelValue ?? ''"
             :disabled="disabled || loading"
             v-bind="attrs"
-            class="border-b border-primary-700 justify-self-start text-xl text-primary-700 py-[6px] bg-transparent"
+            class="w-full min-w-0 border-b border-primary-700 justify-self-start text-primary-700 bg-transparent"
             :class="[
+                sizeClass,
                 isEmpty ? 'text-neutral-400' : 'text-primary-700',
                 disabled || loading ? 'cursor-not-allowed' : 'cursor-pointer',
                 selectClass
             ]"
             @change="onChange"
         >
-            <option value="" disabled class="text-neutral-400">
+            <option value="" class="text-neutral-400">
                 {{ placeholderText }}
             </option>
             <option
@@ -55,6 +56,7 @@ const props = withDefaults(
         options: SelectOption[]
         disabled?: boolean
         loading?: boolean
+        size?: 'default' | 'compact'
         wrapperClass?: string
         labelClass?: string
         selectClass?: string
@@ -63,6 +65,7 @@ const props = withDefaults(
         placeholder: 'Sélectionner',
         disabled: false,
         loading: false,
+        size: 'default',
         wrapperClass: '',
         labelClass: '',
         selectClass: ''
@@ -77,6 +80,11 @@ const attrs = useAttrs()
 
 const isEmpty = computed(() => props.modelValue === '' || props.modelValue === null || props.modelValue === undefined)
 const placeholderText = computed(() => props.placeholder || 'Sélectionner')
+const sizeClass = computed(() =>
+    props.size === 'compact'
+        ? 'text-sm h-8 font-normal normal-case tracking-normal'
+        : 'text-xl py-[6px]'
+)
 
 const onChange = (event: Event) => {
     const target = event.target as HTMLSelectElement