From 6d3d44f0bb2d38032e68e4ab6a1a5866dd2dc3d2 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 1 Jun 2026 09:52:39 +0200
Subject: [PATCH] =?UTF-8?q?feat(front)=20:=20@malio/layer-ui=201.7.3=20?=
 =?UTF-8?q?=E2=80=94=20slot=20message=20toujours=20reserve=20+=20class=20w?=
 =?UTF-8?q?-m-btn-action?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Bump @malio/layer-ui ^1.7.2 → ^1.7.3
- Migration des boutons d'action w-[150px] → w-m-btn-action (CategoryDrawer, RoleDrawer, SiteDrawer, UserRbacDrawer, audit-log)
- Rabotage des gaps de formulaires pour absorber le slot message Malio desormais toujours rendu (forms drawers, listes de checkbox, grille dates audit-log, accordeon permissions)
- Compensation des alignements verticaux pour les voisins non-Malio : puce couleur du SiteDrawer + labels Du/Au du drawer filtres audit-log
- Reduction du padding lateral xl: dans le layout default (170px → 44px)
---
 frontend/app/layouts/default.vue              |  2 +-
 .../catalog/components/CategoryDrawer.vue     |  8 +++----
 .../core/components/PermissionAccordion.vue   |  4 ++--
 .../modules/core/components/RoleDrawer.vue    |  8 +++----
 .../core/components/UserRbacDrawer.vue        | 14 ++++++-----
 .../modules/core/pages/admin/audit-log.vue    | 14 +++++++----
 frontend/modules/core/pages/login.vue         |  4 ++--
 .../modules/sites/components/SiteDrawer.vue   | 23 +++++++++++--------
 frontend/package-lock.json                    |  8 +++----
 frontend/package.json                         |  2 +-
 10 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue
index 0ee27a6..ddd3a4c 100644
--- a/frontend/app/layouts/default.vue
+++ b/frontend/app/layouts/default.vue
@@ -24,7 +24,7 @@
             <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
                 <SiteSelector v-if="showSiteSelector"/>
                 <main
-                    class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-10 sm:px-6 lg:px-12 xl:px-[170px]">
+                    class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-10 sm:px-6 lg:px-12 xl:px-[44px]">
                     <div
                         aria-hidden="true"
                         class="pointer-events-none sticky top-0 z-30 h-[47px] flex-shrink-0 bg-white"/>
diff --git a/frontend/modules/catalog/components/CategoryDrawer.vue b/frontend/modules/catalog/components/CategoryDrawer.vue
index d780808..d99c745 100644
--- a/frontend/modules/catalog/components/CategoryDrawer.vue
+++ b/frontend/modules/catalog/components/CategoryDrawer.vue
@@ -12,7 +12,7 @@
             </h2>
         </template>
 
-        <form class="flex flex-col gap-4 py-4" @submit.prevent="handleSave">
+        <form class="flex flex-col py-4" @submit.prevent="handleSave">
             <!-- Nom (RG-1.02 obligatoire / RG-1.04 longueur 2-120 apres trim).
                  Erreur miroir client + erreurs server-side (422) mappees sur ce champ. -->
             <MalioInputText
@@ -52,21 +52,21 @@
                 variant="danger"
                 icon-name="mdi:delete-outline"
                 icon-position="left"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 @click="emit('delete')"
             />
             <MalioButton
                 v-else
                 :label="t('common.cancel')"
                 variant="tertiary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 @click="emit('update:modelValue', false)"
             />
             <MalioButton
                 v-if="canShowSave"
                 :label="t('common.save')"
                 variant="primary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 :disabled="form.submitting.value || loadingTypes"
                 @click="handleSave"
             />
diff --git a/frontend/modules/core/components/PermissionAccordion.vue b/frontend/modules/core/components/PermissionAccordion.vue
index ddf4949..885c45d 100644
--- a/frontend/modules/core/components/PermissionAccordion.vue
+++ b/frontend/modules/core/components/PermissionAccordion.vue
@@ -11,7 +11,7 @@
             :title="`${group.module} (${selectedCountFor(group)}/${group.permissions.length})`"
             header-class="capitalize"
         >
-            <div class="flex flex-col gap-3">
+            <div class="flex flex-col">
                 <!-- Tout selectionner pour ce module -->
                 <MalioCheckbox
                     :id="`${idPrefix}-group-${group.module}`"
@@ -20,7 +20,7 @@
                     label-class="font-semibold text-sm text-neutral-700"
                     @update:model-value="(val: boolean) => emit('toggle-all', group.module, val)"
                 />
-                <div class="flex flex-col gap-2">
+                <div class="flex flex-col">
                     <MalioCheckbox
                         v-for="perm in group.permissions"
                         :id="`${idPrefix}-perm-${perm.id}`"
diff --git a/frontend/modules/core/components/RoleDrawer.vue b/frontend/modules/core/components/RoleDrawer.vue
index a357251..04c6025 100644
--- a/frontend/modules/core/components/RoleDrawer.vue
+++ b/frontend/modules/core/components/RoleDrawer.vue
@@ -11,7 +11,7 @@
                 {{ isEditMode ? t('admin.roles.editRole') : t('admin.roles.createRole') }}
             </h2>
         </template>
-        <form class="flex flex-col gap-4 py-4" @submit.prevent="handleSave">
+        <form class="flex flex-col py-4" @submit.prevent="handleSave">
             <!-- Champs du role -->
             <MalioInputText
                 v-model="form.label"
@@ -71,7 +71,7 @@
                 variant="danger"
                 icon-name="mdi:delete-outline"
                 icon-position="left"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 :disabled="role?.isSystem"
                 @click="emit('delete')"
             />
@@ -79,13 +79,13 @@
                 v-else
                 :label="t('common.cancel')"
                 variant="tertiary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 @click="emit('update:modelValue', false)"
             />
             <MalioButton
                 :label="t('common.save')"
                 variant="primary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 :disabled="saving || permissionsLoadFailed"
                 @click="handleSave"
             />
diff --git a/frontend/modules/core/components/UserRbacDrawer.vue b/frontend/modules/core/components/UserRbacDrawer.vue
index 3d83cd0..7c6d85b 100644
--- a/frontend/modules/core/components/UserRbacDrawer.vue
+++ b/frontend/modules/core/components/UserRbacDrawer.vue
@@ -11,7 +11,7 @@
                 {{ t('admin.users.drawer.title', { username: user?.username ?? '' }) }}
             </h2>
         </template>
-        <div class="flex flex-col gap-4 py-4">
+        <div class="flex flex-col space-y-4 py-4">
             <!-- Etat d'erreur de chargement des referentiels : bloque la
                  sauvegarde pour empecher un ecrasement silencieux des droits. -->
             <div
@@ -41,11 +41,13 @@
             />
 
             <!-- Section Roles -->
-            <div>
+            <!-- !mt-0 : la MalioCheckbox au-dessus expose son slot message (16px),
+                 qui couvre deja l'ecart attendu — pas besoin du space-y-4 ici. -->
+            <div class="!mt-0">
                 <h4 class="mb-3 text-sm font-semibold text-neutral-700">
                     {{ t('admin.users.drawer.rolesSection') }}
                 </h4>
-                <div class="flex flex-col gap-2">
+                <div class="flex flex-col">
                     <MalioCheckbox
                         v-for="role in allRoles"
                         :key="role.id"
@@ -84,7 +86,7 @@
                 <div v-if="allSites.length === 0" class="text-sm text-neutral-400">
                     {{ t('admin.sites.noSites') }}
                 </div>
-                <div class="flex flex-col gap-2">
+                <div class="flex flex-col">
                     <MalioCheckbox
                         v-for="site in allSites"
                         :id="`site-${site.id}`"
@@ -113,13 +115,13 @@
             <MalioButton
                 :label="t('common.cancel')"
                 variant="tertiary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 @click="emit('update:modelValue', false)"
             />
             <MalioButton
                 :label="t('common.save')"
                 variant="primary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 :disabled="saving || loadFailed"
                 @click="handleSave"
             />
diff --git a/frontend/modules/core/pages/admin/audit-log.vue b/frontend/modules/core/pages/admin/audit-log.vue
index 39a806a..8efd713 100644
--- a/frontend/modules/core/pages/admin/audit-log.vue
+++ b/frontend/modules/core/pages/admin/audit-log.vue
@@ -66,15 +66,18 @@
             <MalioAccordion>
                 <!-- Dates : deux champs date+heure Du / Au (champs datetime a l'origine) -->
                 <MalioAccordionItem :title="t('audit.filters.date_range')" value="dates">
-                    <div class="grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-4">
-                        <span>{{ t('audit.filters.date_from') }}</span>
+                    <!-- pb-4 sur les labels Du/Au : simule le slot message
+                         du MalioDateTime voisin pour qu'items-center recentre
+                         le label sur le centre visible du champ. -->
+                    <div class="grid grid-cols-[auto_1fr] items-center gap-x-3">
+                        <span class="pb-4">{{ t('audit.filters.date_from') }}</span>
                         <!-- Borne le picker "Du" par la valeur "Au" pour interdire une plage
                              inversee a la saisie (le backend renverrait silencieusement 0 ligne). -->
                         <MalioDateTime
                             v-model="draftDateFrom"
                             :max="draftDateTo ?? undefined"
                         />
-                        <span>{{ t('audit.filters.date_to') }}</span>
+                        <span class="pb-4">{{ t('audit.filters.date_to') }}</span>
                         <MalioDateTime
                             v-model="draftDateTo"
                             :min="draftDateFrom ?? undefined"
@@ -84,7 +87,7 @@
 
                 <!-- Type d'entite : cases a cocher (multi-selection) -->
                 <MalioAccordionItem :title="t('audit.filters.entity_type')" value="entity">
-                    <div class="flex flex-col gap-4">
+                    <div class="flex flex-col">
                         <MalioCheckbox
                             v-for="opt in entityTypeOptions"
                             :id="`filter-entity-${opt.value}`"
@@ -105,6 +108,7 @@
                         name="audit-action"
                         :value="opt.value"
                         :label="opt.label"
+                        group-class="mt-0"
                     />
                 </MalioAccordionItem>
 
@@ -121,7 +125,7 @@
                 <MalioButton
                     variant="tertiary"
                     :label="t('audit.filters.reset')"
-                    button-class="w-[150px]"
+                    button-class="w-m-btn-action"
                     @click="resetFilters"
                 />
                 <MalioButton
diff --git a/frontend/modules/core/pages/login.vue b/frontend/modules/core/pages/login.vue
index 859296a..5d0e87f 100644
--- a/frontend/modules/core/pages/login.vue
+++ b/frontend/modules/core/pages/login.vue
@@ -6,7 +6,7 @@
             <img src="/LOGO_MALIO.png" alt="Logo" class="w-[150px]"/>
         </span>
         <form
-            class="mt-8 space-y-6 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
+            class="mt-8 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
             @submit.prevent="handleSubmit"
         >
             <MalioInputText
@@ -30,7 +30,7 @@
                 type="submit"
                 :disabled="isSubmitting"
             />
-            <p class="font-bold">v{{ version }}</p>
+            <p class="mt-6 font-bold">v{{ version }}</p>
         </form>
     </div>
 </template>
diff --git a/frontend/modules/sites/components/SiteDrawer.vue b/frontend/modules/sites/components/SiteDrawer.vue
index 87b2dea..9904610 100644
--- a/frontend/modules/sites/components/SiteDrawer.vue
+++ b/frontend/modules/sites/components/SiteDrawer.vue
@@ -11,7 +11,7 @@
                 {{ isEditMode ? t('admin.sites.editSite') : t('admin.sites.createSite') }}
             </h2>
         </template>
-        <form class="flex flex-col gap-4 py-4" @submit.prevent="handleSave">
+        <form class="flex flex-col py-4" @submit.prevent="handleSave">
             <MalioInputText
                 v-model="form.name"
                 :label="t('admin.sites.form.name')"
@@ -65,11 +65,16 @@
                         input-class="w-full font-mono"
                         required
                     />
-                    <span
-                        :style="{ backgroundColor: isValidHex ? form.color : 'transparent' }"
-                        class="inline-block size-10 shrink-0 rounded-lg border border-neutral-200"
-                        :class="{ 'border-dashed': !isValidHex }"
-                    />
+                    <!-- pb-4 sur le wrapper : simule le slot message du
+                         MalioInputText voisin pour qu'items-center recentre
+                         la puce sur le centre visible de l'input. -->
+                    <div class="shrink-0 pb-4">
+                        <span
+                            :style="{ backgroundColor: isValidHex ? form.color : 'transparent' }"
+                            class="inline-block size-10 rounded-lg border border-neutral-200"
+                            :class="{ 'border-dashed': !isValidHex }"
+                        />
+                    </div>
                 </div>
                 <p v-if="form.color && !isValidHex" class="mt-1 text-xs text-red-600">
                     {{ t('admin.sites.form.colorInvalid') }}
@@ -87,20 +92,20 @@
                 variant="danger"
                 icon-name="mdi:delete-outline"
                 icon-position="left"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 @click="emit('delete')"
             />
             <MalioButton
                 v-else
                 :label="t('common.cancel')"
                 variant="tertiary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 @click="emit('update:modelValue', false)"
             />
             <MalioButton
                 :label="t('common.save')"
                 variant="primary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 :disabled="saving || !isValidHex"
                 @click="handleSave"
             />
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cf060ff..f65e20f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,7 +7,7 @@
       "name": "starseed-frontend",
       "hasInstallScript": true,
       "dependencies": {
-        "@malio/layer-ui": "^1.7.1",
+        "@malio/layer-ui": "^1.7.3",
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/i18n": "^10.2.3",
         "@nuxtjs/tailwindcss": "^6.14.0",
@@ -1866,9 +1866,9 @@
       "license": "MIT"
     },
     "node_modules/@malio/layer-ui": {
-      "version": "1.7.1",
-      "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.7.1/layer-ui-1.7.1.tgz",
-      "integrity": "sha512-RYMMappWt/fgjD+BM7//h2O6kxD6WH9Fui8hoC29xtKySRQsqD61XKTdR7BRRkpktbxKmV39q/hblyAFBqV5yw==",
+      "version": "1.7.3",
+      "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.7.3/layer-ui-1.7.3.tgz",
+      "integrity": "sha512-jw3ka0Az6Jf0F9ifsooknkwXph8TNgoe6H3CjF8tbBxl8oND8HLHjlZ04ooUCoOUEIlsQ1Mm2hFFlQRCB04qdA==",
       "dependencies": {
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/frontend/package.json b/frontend/package.json
index 6cf10d8..dbb651c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,7 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@malio/layer-ui": "^1.7.1",
+    "@malio/layer-ui": "^1.7.3",
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/i18n": "^10.2.3",
     "@nuxtjs/tailwindcss": "^6.14.0",