From 58b9dc581e92bb719f0bc5a39c7555b41d25d180 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 16 Dec 2021 10:57:07 +0900
Subject: [PATCH] fix(client): fix zindex issues

Fix #8060
---
 packages/client/src/components/url-preview-popup.vue | 4 ++--
 packages/client/src/components/user-preview.vue      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

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;