From a8100db3e9ddb37b2388c6e8d76ebddbf6cd855b Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Wed, 2 Sep 2026 21:05:31 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=AE=BE=E7=BD=AE=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/HomeHeader/HomeHeader.css      | 32 +++++++++++++++++++
 .../components/HomeHeader/HomeHeader.vue      |  4 +--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/fe/src/views/components/HomeHeader/HomeHeader.css b/fe/src/views/components/HomeHeader/HomeHeader.css
index dd0e5d1..2379c78 100644
--- a/fe/src/views/components/HomeHeader/HomeHeader.css
+++ b/fe/src/views/components/HomeHeader/HomeHeader.css
@@ -69,6 +69,24 @@
   height: 100%;
 }
 
+.settings-drawer :deep(.el-drawer__body) {
+  display: flex;
+  min-height: 0;
+  padding: 0 20px 20px;
+  overflow: hidden;
+}
+
+.settings-tabs :deep(.el-tabs__header) {
+  flex: 0 0 176px;
+  margin: 0 0 0 20px;
+}
+
+.settings-tabs :deep(.el-tabs__content) {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+}
+
 @media (max-width: 768px) {
   .header-container {
     display: flex;
@@ -87,4 +105,18 @@
   .mobile-logo {
     display: block;
   }
+
+  .settings-drawer :deep(.el-drawer__body) {
+    padding: 0 10px 10px;
+    overflow: auto;
+  }
+
+  .settings-tabs :deep(.el-tabs__header) {
+    flex: none;
+    margin: 0;
+  }
+
+  .settings-tabs :deep(.el-tabs__content) {
+    overflow: visible;
+  }
 }
diff --git a/fe/src/views/components/HomeHeader/HomeHeader.vue b/fe/src/views/components/HomeHeader/HomeHeader.vue
index 7ce6a67..00fed78 100644
--- a/fe/src/views/components/HomeHeader/HomeHeader.vue
+++ b/fe/src/views/components/HomeHeader/HomeHeader.vue
@@ -18,8 +18,8 @@
   </div>
 
   <!-- Settings Drawer -->
-  <el-drawer v-model="globalStatus.settingsDrawerVisible" :size="isMobile ? '100%' : '600px'" :title="lang.settings" class="settings-drawer" :with-header="true" direction="rtl">
-    <el-tabs :tab-position="isMobile ? 'top' : 'left'" class="settings-tabs">
+  <el-drawer v-model="globalStatus.settingsDrawerVisible" :size="isMobile ? '100%' : '50vw'" :title="lang.settings" class="settings-drawer" :with-header="true" direction="rtl">
+    <el-tabs :tab-position="isMobile ? 'top' : 'right'" class="settings-tabs">
       <el-tab-pane :label="lang.security">
         <SecuritySettings/>
       </el-tab-pane>