From c1b60942d2b72d1b8428c662366921c053989430 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 1 Sep 2024 12:26:17 +0200
Subject: [PATCH] Fixed month list overflow when adding a calendar

---
 components/calendar/dialog/Delete.vue   | 26 +++++++++++++------------
 components/calendar/input/MonthList.vue |  2 +-
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/components/calendar/dialog/Delete.vue b/components/calendar/dialog/Delete.vue
index f3482ec..5d396d1 100644
--- a/components/calendar/dialog/Delete.vue
+++ b/components/calendar/dialog/Delete.vue
@@ -68,24 +68,26 @@ function handleClosing() {
           </div>
         </div>
 
-        <footer class="flex gap-2 justify-end">
+        <footer class="flex gap-2 justify-between">
           <UiButton type="button" size="sm" variant="outline" @click="handleClosing">
             Retour
           </UiButton>
 
-          <Transition name="fade-delay">
-            <UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
-              Annuler
-            </UiButton>
-          </Transition>
-
-          <UiButton v-if="calendar" size="sm" variant="destructive" :disabled="isLoading">
-            <Transition name="fade">
-              <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+          <div class="flex gap-2 justify-end">
+            <Transition name="fade-delay">
+              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
+                Annuler
+              </UiButton>
             </Transition>
 
-            Supprimer "{{ calendar?.name }}"
-          </UiButton>
+            <UiButton v-if="calendar" size="sm" variant="destructive" :disabled="isLoading">
+              <Transition name="fade">
+                <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+              </Transition>
+
+              Supprimer "{{ calendar?.name }}"
+            </UiButton>
+          </div>
         </footer>
       </form>
     </UiAlertDialogContent>
diff --git a/components/calendar/input/MonthList.vue b/components/calendar/input/MonthList.vue
index e841780..4b3d62e 100644
--- a/components/calendar/input/MonthList.vue
+++ b/components/calendar/input/MonthList.vue
@@ -78,7 +78,7 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
       </UiButton>
     </div>
     <div class="md:col-span-full">
-      <div class="border-[1px] dark:border-slate-800 p-4 rounded-sm" :class="model.length ? 'md:grid md:grid-cols-12 md:gap-4 md:items-center' : ''">
+      <div class="border-[1px] dark:border-slate-800 p-4 rounded-sm max-h-80 overflow-y-auto" :class="model.length ? 'md:grid md:grid-cols-12 md:gap-4 md:items-center' : ''">
           <div v-if="model.length" class="hidden md:block col-span-1">
             <ul class="grid gap-y-4 justify-center">
               <li v-for="(m, i) in model" :key="`num-${m.name}`">