From 280b650e499c56bc6d6d650365ede814450f3d88 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 27 May 2026 14:50:55 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20rendre=20le=20footer=20du=20Drawer=20hor?=
 =?UTF-8?q?s=20zone=20scrollable=20(=C3=A9pingl=C3=A9=20en=20bas)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le slot #footer était rendu à l'intérieur du body overflow-y-auto, ce qui
faisait courir la scrollbar sur toute la hauteur, derrière le footer. Il est
désormais frère du body (comme MalioModal) : seul le body défile et le footer
reste fixé en bas. Tests, story, pages playground et doc alignés.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .playground/pages/composant/drawer/drawer.vue | 23 ++++++++-----------
 .../pages/composant/filtre/filtres.vue        |  2 +-
 CHANGELOG.md                                  |  1 +
 COMPONENTS.md                                 | 14 +++++------
 app/components/malio/drawer/Drawer.test.ts    | 13 +++++------
 app/components/malio/drawer/Drawer.vue        | 14 +++++------
 app/story/drawer/drawer.story.vue             |  6 ++---
 7 files changed, 32 insertions(+), 41 deletions(-)

diff --git a/.playground/pages/composant/drawer/drawer.vue b/.playground/pages/composant/drawer/drawer.vue
index 0c2cbe5..c41ce25 100644
--- a/.playground/pages/composant/drawer/drawer.vue
+++ b/.playground/pages/composant/drawer/drawer.vue
@@ -33,7 +33,7 @@ const drawerNoDismiss = ref(false)
     </div>
 
     <div class="rounded-lg border p-6">
-      <h2 class="mb-6 text-xl font-bold">Avec footer collant</h2>
+      <h2 class="mb-6 text-xl font-bold">Avec footer d'actions</h2>
       <MalioButton label="Ouvrir le formulaire" variant="tertiary" @click="drawerForm = true" />
       <MalioDrawer v-model="drawerForm" drawer-class="max-w-lg">
         <template #header>
@@ -45,32 +45,27 @@ const drawerNoDismiss = ref(false)
           <MalioInputText label="Email" />
         </div>
         <template #footer>
-          <div class="sticky bottom-0 flex gap-3 bg-white py-4">
-            <MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="drawerForm = false" />
-            <MalioButton label="Enregistrer" button-class="flex-1" @click="drawerForm = false" />
-          </div>
+          <MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="drawerForm = false" />
+          <MalioButton label="Enregistrer" button-class="flex-1" @click="drawerForm = false" />
         </template>
       </MalioDrawer>
     </div>
 
     <div class="rounded-lg border p-6">
-      <h2 class="mb-6 text-xl font-bold">Avec footer fixed bottom</h2>
-      <MalioButton label="Ouvrir (footer fixe)" variant="tertiary" @click="drawerFixedFooter = true" />
+      <h2 class="mb-6 text-xl font-bold">Footer fixe avec contenu long</h2>
+      <MalioButton label="Ouvrir (contenu long)" variant="tertiary" @click="drawerFixedFooter = true" />
       <MalioDrawer v-model="drawerFixedFooter">
         <template #header>
           <h2 class="text-[24px] font-bold text-black">Conditions</h2>
         </template>
-        <!-- pb-24 : laisse la place au footer fixe qui sort du flux et recouvrirait le bas du contenu -->
-        <div class="flex flex-col gap-4 pb-24">
+        <!-- Pas de hack : le footer est hors zone scrollable, seul le body défile -->
+        <div class="flex flex-col gap-4">
           <p v-for="n in 12" :key="n" class="text-m-text">
-            Paragraphe {{ n }} — contenu long pour forcer le scroll et montrer que le footer reste fixé en bas du viewport.
+            Paragraphe {{ n }} — contenu long pour forcer le scroll et montrer que seul le body défile, le footer restant fixé en bas.
           </p>
         </div>
         <template #footer>
-          <!-- fixed : positionné par rapport au viewport ; w-full max-w-md cale la largeur sur le drawer droite par défaut -->
-          <div class="fixed bottom-0 right-0 w-full max-w-md border-t border-m-border bg-white px-5 py-4">
-            <MalioButton label="Accepter" button-class="w-full" @click="drawerFixedFooter = false" />
-          </div>
+          <MalioButton label="Accepter" button-class="w-full" @click="drawerFixedFooter = false" />
         </template>
       </MalioDrawer>
     </div>
diff --git a/.playground/pages/composant/filtre/filtres.vue b/.playground/pages/composant/filtre/filtres.vue
index 9a3ed44..008c793 100644
--- a/.playground/pages/composant/filtre/filtres.vue
+++ b/.playground/pages/composant/filtre/filtres.vue
@@ -27,7 +27,7 @@
       side="right"
       drawer-class="max-w-[450px]"
       body-class="p-0"
-      footer-class="sticky bottom-0 flex justify-between gap-4 bg-white px-5 py-7"
+      footer-class="justify-between gap-4 py-7"
     >
       <template #header>
         <h2 class="text-[24px] font-bold uppercase">Filtres</h2>
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b5b0e97..260de2c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,5 +41,6 @@ Liste des évolutions de la librairie Malio layer UI
 * [#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
+* Drawer : le slot `#footer` est désormais rendu hors de la zone scrollable (épinglé en bas, comme la modal) ; seul le body défile et la scrollbar ne s'étend plus derrière le footer
 * Hauteur des boutons de pagination du datatable alignée sur le select (40px)
 * Distribution de `tailwind.config.ts` aux projets consommateurs avec paths `content` absolus
diff --git a/COMPONENTS.md b/COMPONENTS.md
index 6fe7b65..72182c8 100644
--- a/COMPONENTS.md
+++ b/COMPONENTS.md
@@ -813,14 +813,14 @@ Panneau latéral (drawer) qui s'ouvre depuis la droite ou la gauche avec backdro
 | `overlayClass` | `string` | `''` | Classes CSS backdrop (twMerge) |
 | `headerClass` | `string` | `''` | Classes CSS barre header (twMerge) |
 | `bodyClass` | `string` | `''` | Classes CSS zone scrollable (twMerge) |
-| `footerClass` | `string` | `''` | Classes CSS wrapper du footer (aucune position imposée) |
+| `footerClass` | `string` | `''` | Classes CSS du footer fixe (twMerge) |
 
 **Events :** `update:modelValue(value: boolean)`, `close()`
 
 **Slots :**
-- `header` — en-tête (titre, etc.). S'il est absent et que `showClose` est `true`, seule la croix est affichée.
-- `default` — contenu (zone scrollable).
-- `footer` — rendu dans la zone scrollable, sans positionnement imposé : le consommateur choisit (`sticky bottom-0`, `fixed`, ou rien).
+- `header` — en-tête (titre, etc.), fixe en haut. S'il est absent et que `showClose` est `true`, seule la croix est affichée.
+- `default` — contenu (zone scrollable : seul le body défile).
+- `footer` — actions (boutons). Rendu en bas du panneau, fixe, hors de la zone scrollable. N'apparaît que si le slot est fourni.
 
 ```vue
 <MalioDrawer v-model="isOpen">
@@ -836,14 +836,12 @@ Panneau latéral (drawer) qui s'ouvre depuis la droite ou la gauche avec backdro
   <p>Drawer large depuis la gauche</p>
 </MalioDrawer>
 
-<!-- Footer collé en bas (le consommateur applique le positionnement) -->
+<!-- Footer d'actions (fixe en bas, hors zone scrollable) -->
 <MalioDrawer v-model="isOpen">
   <template #header><h2>Formulaire</h2></template>
   <MalioInputText label="Nom" />
   <template #footer>
-    <div class="sticky bottom-0 bg-white py-4">
-      <MalioButton label="Enregistrer" button-class="w-full" @click="isOpen = false" />
-    </div>
+    <MalioButton label="Enregistrer" button-class="w-full" @click="isOpen = false" />
   </template>
 </MalioDrawer>
 
diff --git a/app/components/malio/drawer/Drawer.test.ts b/app/components/malio/drawer/Drawer.test.ts
index b58d91c..fb2c5b4 100644
--- a/app/components/malio/drawer/Drawer.test.ts
+++ b/app/components/malio/drawer/Drawer.test.ts
@@ -152,12 +152,13 @@ describe('MalioDrawer', () => {
     expect(wrapper.find('[data-test="header"]').classes()).toContain('bg-m-primary')
   })
 
-  it('renders the #footer slot inside the body (scrollable zone)', () => {
+  it('renders the #footer slot in a footer pinned below the body', () => {
     const wrapper = mountComponent(
       { modelValue: true },
       { footer: '<button data-test="save">Enregistrer</button>' },
     )
-    expect(wrapper.find('[data-test="body"] [data-test="footer"] [data-test="save"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="body"] [data-test="footer"]').exists()).toBe(false)
+    expect(wrapper.find('[data-test="footer"] [data-test="save"]').exists()).toBe(true)
   })
 
   it('does not render the footer wrapper when no #footer slot', () => {
@@ -170,14 +171,12 @@ describe('MalioDrawer', () => {
     expect(wrapper.find('[data-test="body"]').classes()).toContain('px-10')
   })
 
-  it('applies footerClass to the footer wrapper', () => {
+  it('applies footerClass to the footer', () => {
     const wrapper = mountComponent(
-      { modelValue: true, footerClass: 'sticky bottom-0' },
+      { modelValue: true, footerClass: 'justify-end' },
       { footer: '<span>pied</span>' },
     )
-    const footer = wrapper.find('[data-test="footer"]')
-    expect(footer.classes()).toContain('sticky')
-    expect(footer.classes()).toContain('bottom-0')
+    expect(wrapper.find('[data-test="footer"]').classes()).toContain('justify-end')
   })
 
   it('aligns to the right by default', () => {
diff --git a/app/components/malio/drawer/Drawer.vue b/app/components/malio/drawer/Drawer.vue
index fab2d87..dbaebac 100644
--- a/app/components/malio/drawer/Drawer.vue
+++ b/app/components/malio/drawer/Drawer.vue
@@ -64,13 +64,13 @@
             data-test="body"
           >
             <slot />
-            <div
-              v-if="$slots.footer"
-              :class="footerClass"
-              data-test="footer"
-            >
-              <slot name="footer" />
-            </div>
+          </div>
+          <div
+            v-if="$slots.footer"
+            :class="twMerge('flex shrink-0 items-center gap-3 px-5 py-4', footerClass)"
+            data-test="footer"
+          >
+            <slot name="footer" />
           </div>
         </div>
       </div>
diff --git a/app/story/drawer/drawer.story.vue b/app/story/drawer/drawer.story.vue
index d1730d7..6bb0f89 100644
--- a/app/story/drawer/drawer.story.vue
+++ b/app/story/drawer/drawer.story.vue
@@ -45,7 +45,7 @@ const showNoDismiss = ref(false)
       </div>
     </Variant>
 
-    <Variant title="Avec footer collant">
+    <Variant title="Avec footer d'actions">
       <div class="p-4">
         <button
           class="rounded bg-m-btn-primary px-4 py-2 text-white"
@@ -62,9 +62,7 @@ const showNoDismiss = ref(false)
             <MalioInputText label="Prénom" />
           </div>
           <template #footer>
-            <div class="sticky bottom-0 flex gap-3 bg-white py-4">
-              <MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
-            </div>
+            <MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
           </template>
         </MalioDrawer>
       </div>