fix: rendre le footer du Drawer hors zone scrollable (épinglé en bas)

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>

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', () => {

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>

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>