修复非移动端设置内容布局变形

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) {

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"

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;
+  }
+}