diff --git a/frontend/src/ui/settings.css b/frontend/src/ui/settings.css
index 6ad5d89..4c92e3e 100644
--- a/frontend/src/ui/settings.css
+++ b/frontend/src/ui/settings.css
@@ -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 {
diff --git a/frontend/src/ui/settings/SkySettingsRow.test.ts b/frontend/src/ui/settings/SkySettingsRow.test.ts
index 504842e..26a80bd 100644
--- a/frontend/src/ui/settings/SkySettingsRow.test.ts
+++ b/frontend/src/ui/settings/SkySettingsRow.test.ts
@@ -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',