feat(ui) : revue des tailles par défaut du DataTable + prop fieldClass au Select

- texte header 16px (était 20px), body 14px (était 18px)
- sélecteur de lignes et boutons de pagination alignés à 30px
- padding 12px entre le tableau et la barre de pagination
- nouvelle prop fieldClass sur Select (override hauteur du field)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

CHANGELOG.md

@@ -43,6 +43,8 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-41] InputEmail : sanitisation à la saisie (suppression des espaces, option `lowercase`)
 
 ### Changed
+* DataTable : tailles par défaut revues — texte header `16px` (était `20px`), texte body `14px` (était `18px`), sélecteur de lignes et boutons de pagination (Prev / numéros / Next) alignés à `30px` de haut, padding de `12px` entre le bas du tableau et la barre de pagination. Couleurs inchangées (texte `m-primary`, bordures noires).
+* Select : nouvelle prop `fieldClass` pour surcharger les classes du field (notamment la hauteur `h-[40px]` jusqu'ici codée en dur) ; utilisée par le DataTable pour passer le sélecteur de perPage à `30px`.
 * [#MUI-35] Refonte du composant drawer : slots `#header`/`#footer`, prop `side` (droite/gauche), `dismissable`, `closeOnEscape`, classes d'override, focus-trap, scroll-lock et fermeture au clavier. **Breaking** : la prop `title` est remplacée par le slot `#header`.
 
 ### Fixed

COMPONENTS.md

@@ -388,6 +388,7 @@ Liste déroulante.
 | `textField` | `string` | `'text-lg'` | Classe taille texte bouton |
 | `textValue` | `string` | `'text-lg'` | Classe taille texte valeur |
 | `textLabel` | `string` | `'text-sm'` | Classe taille texte label |
+| `fieldClass` | `string` | `''` | Classes supplémentaires sur le field (override hauteur, ex. `h-[30px]`) |
 | `noOptionsText` | `string` | `'Aucune option disponible'` | Message affiché dans la dropdown quand `options` est vide |
 
 **Events :** `update:modelValue(value: string | number | null)`

app/components/malio/datatable/DataTable.vue

@@ -7,7 +7,7 @@
             v-for="col in columns"
             :key="col.key"
             scope="col"
-            class="border-b border-black px-3 py-3 text-left align-middle text-[20px]"
+            class="border-b border-black px-3 py-3 text-left align-middle text-[16px]"
           >
             <slot
               v-if="$slots[`header-${col.key}`]"
@@ -32,7 +32,7 @@
           <td
             v-for="col in columns"
             :key="col.key"
-            class="px-3 py-4 text-[18px] text-m-primary"
+            class="px-3 py-4 text-[14px] text-m-primary"
             :class="index < items.length - 1 ? 'border-b border-black' : ''"
           >
             <slot
@@ -57,16 +57,17 @@
 
     <div
       v-if="totalItems > 0"
-      class="flex items-center justify-between pt-2"
+      class="flex items-center justify-between pt-3"
       data-test="pagination"
     >
       <div class="flex items-center gap-4">
         <span class="whitespace-nowrap text-[16px] text-black">Lignes :</span>
-        <div class="h-12">
+        <div class="h-[30px]">
           <MalioSelect
             :model-value="perPage"
             :options="perPageSelectOptions"
-            group-class="w-20"
+            group-class="w-20 h-[30px]"
+            field-class="h-[30px]"
             rounded="rounded"
             text-field="text-sm"
             text-value="text-sm"
@@ -82,7 +83,7 @@
           variant="tertiary"
           label="Prev"
           :disabled="page <= 1"
-          button-class="h-10 w-auto min-w-0 px-3 text-sm"
+          button-class="h-[30px] w-auto min-w-0 px-3 text-sm"
           aria-label="Page précédente"
           data-test="prev-button"
           @click="goToPage(page - 1)"
@@ -97,7 +98,7 @@
           <button
             v-else
             type="button"
-            class="h-10 min-w-[2.5rem] rounded px-2 text-sm transition-colors"
+            class="inline-flex h-[30px] min-w-[2.5rem] items-center justify-center rounded px-2 text-sm transition-colors"
             :class="p === page
               ? 'bg-m-btn-primary text-white font-semibold'
               : 'text-m-text hover:bg-m-bg'"
@@ -113,7 +114,7 @@
           variant="tertiary"
           label="Next"
           :disabled="page >= totalPages"
-          button-class="h-10 w-auto min-w-0 px-3 text-sm"
+          button-class="h-[30px] w-auto min-w-0 px-3 text-sm"
           aria-label="Page suivante"
           data-test="next-button"
           @click="goToPage(page + 1)"

app/components/malio/select/Select.vue

@@ -34,7 +34,7 @@
                     ? 'border-black'
                     : 'border-m-muted',
           disabled ? 'cursor-not-allowed border-m-muted text-black/60' : isReadonly ? 'cursor-default' : 'cursor-pointer',
-          label ? 'min-h-[40px]' : 'h-[40px] py-0',
+          twMerge(label ? 'min-h-[40px]' : 'h-[40px] py-0', fieldClass),
           rounded,
           textField,
   ]"
@@ -206,6 +206,7 @@ const props = withDefaults(defineProps<{
   textField?: string
   textValue?: string
   textLabel?: string
+  fieldClass?: string
   rounded?: string
   disabled?: boolean
   readonly?: boolean
@@ -223,6 +224,7 @@ const props = withDefaults(defineProps<{
   textField: 'text-lg',
   textValue: 'text-lg',
   textLabel: 'text-sm',
+  fieldClass: '',
   rounded: 'rounded-md',
   disabled: false,
   readonly: false,