From edd3113d5696954427ab719662dcb358f9ec25a4 Mon Sep 17 00:00:00 2001
From: LouisMazel <me@loicmazuel.com>
Date: Sun, 24 Nov 2024 18:17:31 +0100
Subject: [PATCH] fix(maz-ui): MazDialog - add padding on the bottom to the
 content when no footer

---
 packages/lib/components/MazDialog.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/lib/components/MazDialog.vue b/packages/lib/components/MazDialog.vue
index 034a9bcf43..5a16f8fa26 100644
--- a/packages/lib/components/MazDialog.vue
+++ b/packages/lib/components/MazDialog.vue
@@ -10,6 +10,7 @@ import {
   nextTick,
   ref,
   useAttrs,
+  useSlots,
   watch,
 } from 'vue'
 import MazBackdrop, { type MazBackdropProps } from './MazBackdrop.vue'
@@ -102,6 +103,9 @@ const wrapperAttrs = computed<{
 
 const dialogContent = ref<HTMLElement>()
 
+const slots = useSlots()
+const hasFooter = computed(() => !!slots.footer)
+
 if (props.scrollable) {
   watch(() => props.modelValue, async (newVal) => {
     await nextTick()
@@ -167,7 +171,7 @@ if (props.scrollable) {
           />
         </div>
       </slot>
-      <div id="dialogDesc" ref="dialogContent" class="m-dialog-content">
+      <div id="dialogDesc" ref="dialogContent" class="m-dialog-content" :class="{ '--bottom-padding': !hasFooter }">
         <!--
             @slot Default content
               @binding {Function} close close function
@@ -175,7 +179,7 @@ if (props.scrollable) {
           -->
         <slot :close :on-backdrop-clicked />
       </div>
-      <div v-if="$slots.footer" class="m-dialog-footer">
+      <div v-if="hasFooter" class="m-dialog-footer">
         <!--
             @slot Footer slot
               @binding {Function} close close function
@@ -218,13 +222,21 @@ if (props.scrollable) {
     &-icon {
       flex: 0 0 auto;
     }
+
+    & .--bottom-padding {
+      @apply maz-pb-4;
+    }
   }
 
   &.--scrollable {
     @apply maz-max-h-[95vh] maz-my-0;
 
     .m-dialog-content {
-      @apply maz-overflow-auto maz-border-y maz-border-color-light maz-py-4;
+      @apply maz-overflow-auto maz-border-t maz-border-color-light maz-py-4;
+
+      &:not(.--bottom-padding) {
+        @apply maz-border-b;
+      }
     }
   }
 }