From 74958dcf34dbcc2e60d16ac148f0ca31c17a2486 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Tue, 17 Dec 2024 12:13:48 +0100
Subject: [PATCH] fix(style): add prop `overPopover` prop to render Modal over
 any popover

---
 front/src/components/ui/Modal.vue  | 4 ++--
 front/src/components/ui/modal.scss | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/front/src/components/ui/Modal.vue b/front/src/components/ui/Modal.vue
index 9388e7a97..3c9d342cb 100644
--- a/front/src/components/ui/Modal.vue
+++ b/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" />
diff --git a/front/src/components/ui/modal.scss b/front/src/components/ui/modal.scss
index a8e8ff823..3763a3484 100644
--- a/front/src/components/ui/modal.scss
+++ b/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);