diff --git a/frontend/src/views/components/ConfigSettings/ConfigSettings.css b/frontend/src/views/components/ConfigSettings/ConfigSettings.css index d65907ae..f4f66f42 100644 --- a/frontend/src/views/components/ConfigSettings/ConfigSettings.css +++ b/frontend/src/views/components/ConfigSettings/ConfigSettings.css @@ -99,7 +99,7 @@ } .config-workspace { display: grid; - grid-template-columns: minmax(0, 1fr) 196px; + grid-template-columns: minmax(0, 1fr) clamp(156px, 30%, 196px); grid-template-areas: "main submenu"; align-items: start; gap: 16px; @@ -378,6 +378,62 @@ flex-direction: column; gap: 10px; } +} + +@media (min-width: 769px) { + .config-navigation { + gap: 10px; + } + + .config-navigation > :deep(.settings-submenu) { + position: static; + padding: 2px 0 2px 10px; + border: 0; + border-left: 1px solid var(--pm-border-color); + border-radius: 0; + background: transparent; + } + + .config-navigation > :deep(.settings-submenu-heading) { + flex-direction: row-reverse; + padding: 2px 8px 8px; + } + + .config-navigation > :deep(.settings-submenu-list) { + display: grid; + gap: 2px; + padding: 0; + } + + .config-navigation > :deep(.settings-submenu-entry), + .config-navigation > :deep(.settings-submenu-item) { + width: 100%; + } + + .config-navigation > :deep(.settings-submenu-item) { + white-space: normal; + } + + .config-navigation > :deep(.has-children) { + margin-top: 6px; + padding: 4px; + } + + .config-navigation > :deep(.settings-tertiary-list) { + grid-template-columns: minmax(0, 1fr); + } + + .config-navigation > :deep(.settings-submenu-item.active::before) { + top: 10px; + right: auto; + bottom: 10px; + left: -11px; + width: 3px; + height: auto; + } +} + +@media (max-width: 768px) { .config-workspace { grid-template-columns: minmax(0, 1fr); grid-template-areas: @@ -385,8 +441,8 @@ "main"; gap: 16px; } + .config-navigation { - gap: 12px; position: static; } } diff --git a/frontend/src/views/components/HomeHeader/HomeHeader.vue b/frontend/src/views/components/HomeHeader/HomeHeader.vue index 3f9cf0cd..1ae47211 100644 --- a/frontend/src/views/components/HomeHeader/HomeHeader.vue +++ b/frontend/src/views/components/HomeHeader/HomeHeader.vue @@ -20,7 +20,7 @@ { + const header = read('HomeHeader/HomeHeader.vue') + const config = read('ConfigSettings/ConfigSettings.css') + const containerStart = config.indexOf('@container settings-content (max-width: 560px)') + const desktopStart = config.indexOf('@media (min-width: 769px)', containerStart) + const containerRule = config.slice(containerStart, desktopStart) + assert.match(header, /min\(100vw, max\(50vw, 820px\)\)/) + assert.match(config, /grid-template-areas: "main submenu"/) + assert.match(config, /@media \(min-width: 769px\)[\s\S]*grid-template-columns: minmax\(0, 1fr\)/) + assert.match(config, /@media \(max-width: 768px\)[\s\S]*"submenu"[\s\S]*"main"/) + assert.ok(containerStart >= 0 && desktopStart > containerStart) + assert.doesNotMatch(containerRule, /config-workspace|config-navigation/) +})