fix(style): add prop `overPopover` prop to render Modal over any popover

front/src/components/ui/Modal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Button from '~/components/ui/Button.vue'
 
-const { title } = defineProps<{ title:string }>()
+const { title, overPopover = false } = defineProps<{ title:string, overPopover?:true }>()
 const isOpen = defineModel<boolean>({ default:false })
 
 // TODO:
@@ -14,7 +14,7 @@ const isOpen = defineModel<boolean>({ default:false })
   <Teleport to="body">
     <Transition mode="out-in">
       <div v-if="isOpen" @click.exact.stop="isOpen = false" class="funkwhale overlay">
-        <div @click.stop class="funkwhale modal" :class="$slots.alert && 'has-alert'" >
+        <div @click.stop class="funkwhale modal" :class="[$slots.alert && 'has-alert', overPopover && 'over-popover']" >
           <h2>
             {{ title }}
             <Button icon="bi-x-lg" ghost @click="isOpen = false" />

front/src/components/ui/modal.scss

@@ -71,6 +71,11 @@
   }
 }
 
+.funkwhale.overlay:has(.over-popover) {
+  // override z-index
+  z-index: 999999;
+}
+
 .funkwhale.overlay {
   background: rgba(#000, .2);