diff --git a/packages/client/src/components/url-preview-popup.vue b/packages/client/src/components/url-preview-popup.vue index 65076c6dd..75c5bca7d 100644 --- a/packages/client/src/components/url-preview-popup.vue +++ b/packages/client/src/components/url-preview-popup.vue @@ -1,5 +1,5 @@ <template> -<div class="fgmtyycl" :style="{ top: top + 'px', left: left + 'px' }"> +<div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }"> <transition name="zoom" @after-leave="$emit('closed')"> <MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/> </transition> @@ -35,6 +35,7 @@ export default defineComponent({ u: null, top: 0, left: 0, + zIndex: os.claimZIndex(), }; }, @@ -52,7 +53,6 @@ export default defineComponent({ <style lang="scss" scoped> .fgmtyycl { position: absolute; - z-index: 11000; width: 500px; max-width: calc(90vw - 12px); pointer-events: none; diff --git a/packages/client/src/components/user-preview.vue b/packages/client/src/components/user-preview.vue index 5289ce54d..9b3f15b61 100644 --- a/packages/client/src/components/user-preview.vue +++ b/packages/client/src/components/user-preview.vue @@ -1,6 +1,6 @@ <template> <transition name="popup" appear @after-leave="$emit('closed')"> - <div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }"> + <div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }"> <div v-if="fetched" class="info"> <div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> <MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/> @@ -65,6 +65,7 @@ export default defineComponent({ fetched: false, top: 0, left: 0, + zIndex: os.claimZIndex(), }; }, @@ -109,7 +110,6 @@ export default defineComponent({ .fxxzrfni { position: absolute; - z-index: 11000; width: 300px; overflow: hidden; transform-origin: center top;