FIX - increase Sky settings row spacing

This commit is contained in:
DerEchteAlec
2026-08-13 20:36:00 +02:00
parent d2222c9b35
commit 36672c69e0
2 changed files with 19 additions and 5 deletions
-5
View File
@@ -109,11 +109,6 @@ button.sky-settings-row__frame:focus-visible {
outline-offset: -2px;
}
.sky-settings-row--toggle .sky-settings-row__frame {
padding-top: var(--sky-space-1);
padding-bottom: var(--sky-space-1);
}
.sky-settings-row__leading,
.sky-settings-row__accessory,
.sky-settings-row__trailing {
@@ -1,14 +1,33 @@
import { readFileSync } from 'node:fs'
import { createSSRApp, h } from 'vue'
import { renderToString } from 'vue/server-renderer'
import { describe, expect, it } from 'vitest'
import SkySettingsRow from '@/ui/settings/SkySettingsRow.vue'
const settingsStyles = readFileSync(
new URL('../settings.css', import.meta.url),
'utf8',
)
async function renderRow(props: Record<string, unknown>): Promise<string> {
return renderToString(createSSRApp(SkySettingsRow, props))
}
describe('SkySettingsRow', () => {
it('uses the regular row padding for toggles without compacting them', () => {
expect(settingsStyles).toMatch(
/\.sky-settings-row__frame,\s*\.sky-settings-range-row__frame\s*\{[^}]*padding:\s*8px 16px/s,
)
expect(settingsStyles).not.toMatch(
/\.sky-settings-row--toggle\s+\.sky-settings-row__frame\s*\{[^}]*padding-(?:top|bottom):/s,
)
expect(settingsStyles).toMatch(
/\.sky-settings-group--compact\s+\.sky-settings-row__frame,[^}]*padding-top:\s*6px;[^}]*padding-bottom:\s*6px/s,
)
})
it('renders navigation as a full-row button with value and chevron', async () => {
const html = await renderRow({
kind: 'navigation',