From 5b78f34847e987b7655530a8bdfae518775bdc78 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Thu, 26 Mar 2026 23:31:45 +0800
Subject: [PATCH] perf(stage-ui): improve about dialog to be blurry

---
 .../src/components/Layouts/InteractiveArea/Actions/About.vue  | 2 +-
 .../src/components/scenarios/dialogs/about/about-dialog.vue   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/stage-layouts/src/components/Layouts/InteractiveArea/Actions/About.vue b/packages/stage-layouts/src/components/Layouts/InteractiveArea/Actions/About.vue
index f709df253..376c0413e 100644
--- a/packages/stage-layouts/src/components/Layouts/InteractiveArea/Actions/About.vue
+++ b/packages/stage-layouts/src/components/Layouts/InteractiveArea/Actions/About.vue
@@ -25,7 +25,7 @@ const edition = isStageTamagotchi()
 
 <template>
   <button border="2 solid neutral-100/60 dark:neutral-800/30" bg="neutral-50/70 dark:neutral-800/70" w-fit flex items-center self-end justify-center rounded-xl p-2 backdrop-blur-md title="About" @click="show = !show">
-    <div i-solar:info-circle-outline size-5 text="neutral-500 dark:neutral-400" />
+    <div i-solar:info-circle-outline class="size-5" text="neutral-500 dark:neutral-400" />
   </button>
   <AboutDialog v-model="show">
     <AboutContent :subtitle="edition" :build-info="buildInfo" :links="aboutLinks" />
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/about/about-dialog.vue b/packages/stage-ui/src/components/scenarios/dialogs/about/about-dialog.vue
index e149004c5..c90d96b74 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/about/about-dialog.vue
+++ b/packages/stage-ui/src/components/scenarios/dialogs/about/about-dialog.vue
@@ -18,7 +18,7 @@ onMounted(() => screenSafeArea.update())
     <slot name="trigger" />
     <DialogPortal>
       <DialogOverlay class="fixed inset-0 z-[9999] bg-black/50 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn" />
-      <DialogContent class="fixed left-1/2 top-1/2 z-[9999] max-h-full max-w-2xl w-[92dvw] transform overflow-y-scroll rounded-2xl bg-white p-6 shadow-xl outline-none backdrop-blur-md scrollbar-none -translate-x-1/2 -translate-y-1/2 data-[state=closed]:animate-contentHide data-[state=open]:animate-contentShow dark:bg-neutral-900">
+      <DialogContent class="fixed left-1/2 top-1/2 z-[9999] max-h-full max-w-2xl w-[92dvw] transform overflow-y-scroll rounded-2xl bg-white/95 p-6 shadow-xl outline-none backdrop-blur-md scrollbar-none -translate-x-1/2 -translate-y-1/2 data-[state=closed]:animate-contentHide data-[state=open]:animate-contentShow dark:bg-neutral-900/90">
         <slot />
       </DialogContent>
     </DialogPortal>
@@ -26,7 +26,7 @@ onMounted(() => screenSafeArea.update())
   <DrawerRoot v-else :open="showDialog" should-scale-background @update:open="value => showDialog = value">
     <DrawerPortal>
       <DrawerOverlay class="fixed inset-0" />
-      <DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[96%] flex flex-col rounded-t-2xl bg-neutral-50 px-4 pt-4 outline-none backdrop-blur-md dark:bg-neutral-900/95" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }">
+      <DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[96%] flex flex-col rounded-t-2xl bg-neutral-50/95 px-4 pt-4 outline-none backdrop-blur-md dark:bg-neutral-900/90" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }">
         <DrawerHandle />
         <slot />
       </DrawerContent>