From 1f79a42da790c164a5e38f2278ae8e4697a966b5 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 19 Feb 2025 01:22:33 +0800
Subject: [PATCH] style: update layout and styling for DesktopSettings
 component

Co-authored-by: Rizumu Ayaka <19204772+LittleSound@users.noreply.github.com>
---
 .../src/components/Widgets/DesktopSettings.vue         | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/stage-web/src/components/Widgets/DesktopSettings.vue b/packages/stage-web/src/components/Widgets/DesktopSettings.vue
index 80e2bb038..8a02974b2 100644
--- a/packages/stage-web/src/components/Widgets/DesktopSettings.vue
+++ b/packages/stage-web/src/components/Widgets/DesktopSettings.vue
@@ -16,12 +16,14 @@ import MobileSettings from './MobileSettings.vue'
         <div i-solar:settings-minimalistic-bold-duotone />
       </DrawerTrigger>
       <DrawerPortal>
-        <DrawerOverlay class="fixed inset-0 z-50 bg-black/40" />
+        <DrawerOverlay fixed inset-0 z-50 bg-black:40 />
         <DrawerContent
-          max-w="[50%]" bg="[#fffbff] dark:[#1f1a1d]" fixed bottom-0 right-0 top-0 z-50 ml-24 h-full w-full
-          flex flex-col overflow-y-scroll rounded-l-lg
+          class="max-w-40% min-w-500px w-full"
+          flex="~ col"
+          bg="white dark:zinc-900"
+          fixed inset-y-4 right-4 z-50 of-hidden rounded-lg
         >
-          <div class="flex flex-1 flex-col rounded-t-lg p-5" bg="[#fffbff] dark:[#1f1a1d]" gap-2>
+          <div flex="~ 1 col gap-2" of-y-scroll rounded-t-lg p-5>
             <MobileSettings />
           </div>
         </DrawerContent>