From 9c11cab4717f318d80b257eb48b78b5160eb1ee4 Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Thu, 15 Oct 2026 20:29:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=9D=9E=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E8=AE=BE=E7=BD=AE=E5=86=85=E5=AE=B9=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=8F=98=E5=BD=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ConfigSettings/ConfigSettings.css         | 22 +++++++++-
 .../components/HomeHeader/HomeHeader.vue      |  2 +-
 .../SettingsSubmenu/SettingsSubmenu.css       | 43 +++++++++++++++++++
 3 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/components/ConfigSettings/ConfigSettings.css b/frontend/src/views/components/ConfigSettings/ConfigSettings.css
index 128a538..ffb809a 100644
--- a/frontend/src/views/components/ConfigSettings/ConfigSettings.css
+++ b/frontend/src/views/components/ConfigSettings/ConfigSettings.css
@@ -103,6 +103,7 @@
   grid-template-areas: "main submenu";
   align-items: start;
   gap: 16px;
+  min-width: 0;
 }
 .config-main {
   grid-area: main;
@@ -332,6 +333,23 @@
   }
 }
 @container settings-content (max-width: 560px) {
+  :global(.settings-drawer-desktop) .config-workspace {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "submenu"
+      "main";
+    gap: 16px;
+  }
+
+  :global(.settings-drawer-desktop) .config-navigation {
+    position: static;
+    min-width: 0;
+  }
+
+  :global(.settings-drawer-desktop) .config-main {
+    min-width: 0;
+  }
+
   .settings-header {
     align-items: flex-start;
     flex-direction: column;
@@ -370,7 +388,9 @@
   }
 
   .config-navigation > :deep(.settings-submenu-item) {
-    white-space: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .config-navigation > :deep(.has-children) {
diff --git a/frontend/src/views/components/HomeHeader/HomeHeader.vue b/frontend/src/views/components/HomeHeader/HomeHeader.vue
index 536660c..e1ebf15 100644
--- a/frontend/src/views/components/HomeHeader/HomeHeader.vue
+++ b/frontend/src/views/components/HomeHeader/HomeHeader.vue
@@ -22,7 +22,7 @@
     v-model="globalStatus.settingsDrawerVisible"
     :size="isMobile ? '100%' : '50%'"
     :title="lang.settings"
-    class="settings-drawer"
+    :class="['settings-drawer', isMobile ? 'settings-drawer-mobile' : 'settings-drawer-desktop']"
     :with-header="true"
     direction="rtl"
     :before-close="closeSettings"
diff --git a/frontend/src/views/components/SettingsSubmenu/SettingsSubmenu.css b/frontend/src/views/components/SettingsSubmenu/SettingsSubmenu.css
index 6e7aa65..fdef1ce 100644
--- a/frontend/src/views/components/SettingsSubmenu/SettingsSubmenu.css
+++ b/frontend/src/views/components/SettingsSubmenu/SettingsSubmenu.css
@@ -246,3 +246,46 @@
     height: 2px;
   }
 }
+
+@container settings-content (max-width: 560px) {
+  :global(.settings-drawer-desktop) .settings-submenu {
+    padding: 10px;
+  }
+
+  :global(.settings-drawer-desktop) .settings-submenu-heading {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+    padding: 0 2px 8px;
+  }
+
+  :global(.settings-drawer-desktop) .settings-submenu-list {
+    display: grid;
+    gap: 3px;
+    padding: 0;
+  }
+
+  :global(.settings-drawer-desktop) .settings-submenu-entry {
+    min-width: 0;
+    width: 100%;
+  }
+
+  :global(.settings-drawer-desktop) .settings-submenu-item {
+    width: 100%;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :global(.settings-drawer-desktop) .settings-tertiary-list {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  :global(.settings-drawer-desktop) .settings-tertiary-item {
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}