diff --git a/src/components/modal/Modal.vue b/src/components/modal/Modal.vue index c7334010182758f2f90ef4d0e3c20645c36f8ed2..80158c8ff85609e474378e41e6f59c2a60af05fb 100644 --- a/src/components/modal/Modal.vue +++ b/src/components/modal/Modal.vue @@ -7,21 +7,21 @@ 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> - <Transition> - <div v-if="$slots.alert" class="alert-container"> - <div> - <slot name="alert" /> + <div class="modal-content"> + <Transition> + <div v-if="$slots.alert" class="alert-container"> + <div> + <slot name="alert" /> + </div> </div> - </div> - </Transition> + </Transition> - <div class="modal-content"> <slot /> </div> <div v-if="$slots.actions" class="modal-actions"> diff --git a/src/components/modal/style.scss b/src/components/modal/style.scss index 3e6daaf7c83b1fb8aee2e4704693c6292822b598..a8e8ff8235c5f345c949569a40bd56155116ec0c 100644 --- a/src/components/modal/style.scss +++ b/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; - } - } + display: grid; + 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 {