From 14a2c43bd481b84baa1b4f3fdb3781659aa315de Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Fri, 20 Dec 2024 10:53:14 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=92=84=20Fix=20z-index=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTBook/SpecTableValue.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NFTBook/SpecTableValue.vue b/src/components/NFTBook/SpecTableValue.vue
index 54aaf54bc..e5a75193c 100644
--- a/src/components/NFTBook/SpecTableValue.vue
+++ b/src/components/NFTBook/SpecTableValue.vue
@@ -3,7 +3,7 @@
     <div :class="['font-[600]', textStyle]" v-text="text" />
     <div
       v-if="tooltipText"
-      class="relative hidden group laptop:block"
+      class="relative z-[300] hidden group laptop:block"
       @mouseenter="hoverTooltips"
     >
       <IconInfo />

From 1e6d2ccf88df79137bb65b8f29ab7205712d1d9f Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Fri, 20 Dec 2024 11:20:59 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=9A=B8=20Improve=20backdrop=20behavio?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BottomDialog.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/BottomDialog.vue b/src/components/BottomDialog.vue
index 067c42970..f7efeaeed 100644
--- a/src/components/BottomDialog.vue
+++ b/src/components/BottomDialog.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="fixed inset-0 z-50 bg-black bg-opacity-[30%]">
+  <div
+    class="fixed inset-0 z-[1000001] bg-opacity-25 backdrop-filter bg-dark-gray backdrop-blur-sm"
+    @click="close"
+  >
     <div
       class="fixed left-0 bottom-0 flex flex-col items-center gap-[8px] w-full bg-white rounded-t-[16px]"
+      @click.stop
     >
       <div class="relative w-full">
         <ButtonV2
@@ -18,7 +22,7 @@
       <div
         class="flex items-center justify-center w-full pt-[12px] pb-[8px] px-[20px]"
       >
-        <h5 class="text-[18px] font-600 text-black" v-text="title" />
+        <p class="block text-[18px] font-600 text-black" v-text="title" />
       </div>
       <div class="w-full h-[1px] bg-shade-gray" />
 
@@ -37,9 +41,17 @@ export default {
       default: undefined,
     },
   },
+  mounted() {
+    // Prevent scrolling on the body when the dialog is open
+    document.body.classList.add('overflow-hidden');
+  },
+  beforeUnmount() {
+    document.body.classList.remove('overflow-hidden');
+  },
   methods: {
     close() {
       this.$emit('close');
+      document.body.classList.remove('overflow-hidden');
     },
   },
 };

From 85a0a83779bc9cfa4ad112e487cda532a0d71aaf Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Fri, 20 Dec 2024 11:26:01 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=92=84=20Adjust=20minor=20style=20iss?=
 =?UTF-8?q?ues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BottomDialog.vue     | 2 +-
 src/components/NFTBook/Tooltips.vue | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/BottomDialog.vue b/src/components/BottomDialog.vue
index f7efeaeed..85aadddfa 100644
--- a/src/components/BottomDialog.vue
+++ b/src/components/BottomDialog.vue
@@ -26,7 +26,7 @@
       </div>
       <div class="w-full h-[1px] bg-shade-gray" />
 
-      <div class="px-[20px] pt-[18px] pb-[24px]">
+      <div class="px-[20px] pt-[18px] pb-[48px]">
         <slot name="content" />
       </div>
     </div>
diff --git a/src/components/NFTBook/Tooltips.vue b/src/components/NFTBook/Tooltips.vue
index b4270795d..dcbb59a37 100644
--- a/src/components/NFTBook/Tooltips.vue
+++ b/src/components/NFTBook/Tooltips.vue
@@ -20,8 +20,11 @@
       'shadow-md',
     ]"
   >
-    <h4 class="font-600 text-dark-gray">{{ tooltipTitle }}</h4>
-    <p>{{ tooltipText }}</p>
+    <p
+      class="block text-[14px] font-600 text-dark-gray"
+      v-text="tooltipTitle"
+    />
+    <p v-text="tooltipText" />
   </div>
 </template>