From fe45072c643b4755df67260ed169bd0e327b50a0 Mon Sep 17 00:00:00 2001
From: wenyuan <49969025+wenyuanw@users.noreply.github.com>
Date: Thu, 26 Jun 2025 00:29:38 +0800
Subject: [PATCH] optimize(projects): improve theme drawer responsive width for
 mobile devices

---
 src/layouts/modules/theme-drawer/index.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/layouts/modules/theme-drawer/index.vue b/src/layouts/modules/theme-drawer/index.vue
index ae77d52a..5fec02aa 100644
--- a/src/layouts/modules/theme-drawer/index.vue
+++ b/src/layouts/modules/theme-drawer/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useAppStore } from '@/store/modules/app';
 import { $t } from '@/locales';
 import AppearanceSettings from './modules/appearance/index.vue';
@@ -13,10 +13,19 @@ defineOptions({
 
 const appStore = useAppStore();
 const activeTab = ref('appearance');
+
+const drawerWidth = computed(() => {
+  // On mobile devices, use 90% of viewport width with a maximum of 400px
+  if (appStore.isMobile) {
+    return 'min(90vw, 400px)';
+  }
+
+  return 460;
+});
 </script>
 
 <template>
-  <NDrawer v-model:show="appStore.themeDrawerVisible" display-directive="show" :width="460">
+  <NDrawer v-model:show="appStore.themeDrawerVisible" display-directive="show" :width="drawerWidth">
     <NDrawerContent :title="$t('theme.themeDrawerTitle')" :native-scrollbar="false" closable>
       <NTabs v-model:value="activeTab" type="segment" size="medium" class="mb-16px">
         <NTab name="appearance" :tab="$t('theme.tabs.appearance')"></NTab>