fix settings (with toggles) layout

js/settings.js

@@ -1406,22 +1406,18 @@ export function initializeSettings(scrobbler, player, api, ui) {
     // Apply sidebar visibility on initialization
     sidebarSectionSettings.applySidebarVisibility();
 
-    const sidebarOrderConfig = [
-        { toggle: sidebarShowHomeToggle, sidebarId: 'sidebar-nav-home' },
-        { toggle: sidebarShowLibraryToggle, sidebarId: 'sidebar-nav-library' },
-        { toggle: sidebarShowRecentToggle, sidebarId: 'sidebar-nav-recent' },
-        { toggle: sidebarShowUnreleasedToggle, sidebarId: 'sidebar-nav-unreleased' },
-        { toggle: sidebarShowDonateToggle, sidebarId: 'sidebar-nav-donate' },
-        { toggle: sidebarShowSettingsToggle, sidebarId: 'sidebar-nav-settings' },
-        { toggle: sidebarShowAccountToggle, sidebarId: 'sidebar-nav-account' },
-        { toggle: sidebarShowAboutToggle, sidebarId: 'sidebar-nav-about' },
-        { toggle: sidebarShowDownloadToggle, sidebarId: 'sidebar-nav-download' },
-        { toggle: sidebarShowDiscordToggle, sidebarId: 'sidebar-nav-discord' },
-    ];
-
     const sidebarSettingsGroup = sidebarShowHomeToggle?.closest('.settings-group');
     if (sidebarSettingsGroup) {
-        sidebarOrderConfig.forEach(({ toggle, sidebarId }) => {
+        const toggleIdFromSidebarId = (sidebarId) =>
+            sidebarId ? sidebarId.replace('sidebar-nav-', 'sidebar-show-') + '-toggle' : '';
+
+        const sidebarOrderConfig = sidebarSectionSettings.DEFAULT_ORDER.map((sidebarId) => ({
+            sidebarId,
+            toggleId: toggleIdFromSidebarId(sidebarId),
+        }));
+
+        sidebarOrderConfig.forEach(({ toggleId, sidebarId }) => {
+            const toggle = document.getElementById(toggleId);
             const item = toggle?.closest('.setting-item');
             if (!item) return;
             item.dataset.sidebarId = sidebarId;

styles.css

@@ -4596,6 +4596,35 @@ img[src=''] {
         gap: var(--spacing-md);
     }
 
+    .setting-item:has(.toggle-switch) {
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+    }
+
+    .setting-item:has(.toggle-switch) .info {
+        width: auto;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .setting-item:has(.toggle-switch) .label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .setting-item:has(.toggle-switch) .description {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+    }
+
+    .setting-item:has(.toggle-switch) .toggle-switch {
+        margin-left: auto;
+    }
+
     .setting-item .info {
         width: 100%;
     }