fix: remove workarounds to properly overlay the top menu bar over everything else

src/components/home/contentAuth.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="content-auth" :class="{'z-unset': modalActive}">
+	<div class="content-auth">
 		<BaseButton
 			v-if="menuActive"
 			@click="$store.commit('menuActive', false)"
@@ -129,7 +129,6 @@ const store = useStore()
 const background = computed(() => store.state.background)
 const blurHash = computed(() => store.state.blurHash)
 const menuActive = computed(() => store.state.menuActive)
-const modalActive = computed(() => store.state.modalActive)
 
 function showKeyboardShortcuts() {
 	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)

src/components/list/partials/filter-popup.vue

@@ -13,7 +13,13 @@
 	>
 		{{ $t('filters.title') }}
 	</x-button>
-	<modal @close="() => modalOpen = false" :enabled="modalOpen">
+	<modal
+		@close="() => modalOpen = false"
+		:enabled="modalOpen"
+		transition-name="fade"
+		:overflow="true"
+		variant="hint-modal"
+	>
 		<filters
 			:has-title="true"
 			v-model="value"

src/components/misc/modal.vue

@@ -1,4 +1,5 @@
 <template>
+	<Teleport to="body">
 		<!-- FIXME: transition should not be included in the modal -->
 		<transition name="modal">
 			<section
@@ -58,15 +59,13 @@
 				</div>
 			</section>
 		</transition>
+	</Teleport>
 </template>
 
 <script lang="ts" setup>
 import BaseButton from '@/components/base/BaseButton.vue'
-import {ref, watch} from 'vue'
+import {onUnmounted, ref, watch} from 'vue'
 import {useScrollLock} from '@vueuse/core'
-import {useStore} from 'vuex'
-
-const store = useStore()
 
 const props = withDefaults(defineProps<{
 	enabled?: boolean,
@@ -89,9 +88,10 @@ watch(
 	() => props.enabled,
 	enabled => {
 		scrollLock.value = enabled
-		store.commit('modalActive', enabled)
 	},
 )
+
+onUnmounted(() => scrollLock.value = false)
 </script>
 
 <style lang="scss" scoped>

src/store/index.ts

@@ -51,7 +51,6 @@ export const store = createStore({
 		menuActive: true,
 		keyboardShortcutsActive: false,
 		quickActionsActive: false,
-		modalActive: false,
 	},
 	mutations: {
 		[LOADING](state, loading) {
@@ -90,9 +89,6 @@ export const store = createStore({
 		[BLUR_HASH](state, blurHash) {
 			state.blurHash = blurHash
 		},
-		modalActive(state, active) {
-			state.modalActive = active
-		},
 	},
 	actions: {
 		async [CURRENT_LIST]({state, commit}, {list, forceUpdate = false}) {