feat: add max modal height

Part-of: <!95>

src/components/modal/Modal.vue

@@ -7,12 +7,13 @@ const open = defineModel<boolean>({ required: true })
   <Teleport to="body">
     <Transition mode="out-in">
       <div v-if="open" @click.exact.stop="open = false" class="funkwhale overlay">
-        <div @click.stop class="funkwhale modal">
+        <div @click.stop class="funkwhale modal" :class="$slots.alert && 'has-alert'" >
           <h2>
             {{ title }}
             <FwButton icon="bi-x-lg" color="secondary" variant="ghost" @click="open = false" />
           </h2>
 
+          <div class="modal-content">
             <Transition>
               <div v-if="$slots.alert" class="alert-container">
                 <div>
@@ -21,7 +22,6 @@ const open = defineModel<boolean>({ required: true })
               </div>
             </Transition>
 
-          <div class="modal-content">
             <slot />
           </div>
           <div v-if="$slots.actions" class="modal-actions">

src/components/modal/style.scss

@@ -6,24 +6,9 @@
   max-width: min(90vw, 40rem);
   width: 100%;
 
-  > .alert-container {
   display: grid;
-    grid-template-rows: 1fr;
-
-    &.v-enter-active,
-    &.v-leave-active {
-      transition: grid-template-rows 0.2s ease;
-    }
-
-    &.v-enter-from,
-    &.v-leave-to {
-      grid-template-rows: 0fr;
-    }
-
-    > div {
-      overflow: hidden;
-    }
-  }
+  max-height: 90vh;
+  grid-template-rows: auto 1fr auto;
 
   > h2 {
     font-size: 1.25em;
@@ -42,7 +27,32 @@
   }
 
   .modal-content {
-    padding: 1rem 2rem 1rem;
+    padding: 1rem 2rem;
+    overflow: auto;
+    position: relative;
+
+    > .alert-container {
+      position: sticky;
+      top: -1rem;
+      margin: -1rem -2rem 1rem;
+
+      display: grid;
+      grid-template-rows: 1fr;
+
+      &.v-enter-active,
+      &.v-leave-active {
+        transition: grid-template-rows 0.2s ease;
+      }
+
+      &.v-enter-from,
+      &.v-leave-to {
+        grid-template-rows: 0fr;
+      }
+
+      > div {
+        overflow: hidden;
+      }
+    }
   }
 
   .modal-actions {