FIX - align first Sky settings group

frontend/src/ui/settings.css

@@ -12,6 +12,10 @@
   line-height: 18px;
 }
 
+.sky-settings-group:first-child > .sky-settings-group__title:first-child {
+  margin-top: 0;
+}
+
 .sky-settings-group__list {
   min-width: 0;
   margin: 0;

frontend/src/ui/settings/SkySettingsGroup.test.ts

@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs'
+
 import { createSSRApp, h } from 'vue'
 import { renderToString } from 'vue/server-renderer'
 import { describe, expect, it } from 'vitest'
@@ -5,6 +7,11 @@ import { describe, expect, it } from 'vitest'
 import SkySettingsGroup from '@/ui/settings/SkySettingsGroup.vue'
 import SkySettingsRow from '@/ui/settings/SkySettingsRow.vue'
 
+const settingsStyles = readFileSync(
+  new URL('../settings.css', import.meta.url),
+  'utf8',
+)
+
 describe('SkySettingsGroup', () => {
   it('connects its heading and footer to the settings section', async () => {
     const app = createSSRApp({
@@ -49,4 +56,13 @@ describe('SkySettingsGroup', () => {
     expect(html).not.toContain('<h2')
     expect(html).not.toContain('sky-settings-group__footer')
   })
+
+  it('keeps the first group title flush with the scroll content', () => {
+    expect(settingsStyles).toMatch(
+      /\.sky-settings-group:first-child\s*>\s*\.sky-settings-group__title:first-child\s*\{[^}]*margin-top:\s*0/s,
+    )
+    expect(settingsStyles).toMatch(
+      /\.sky-settings-group__title\s*\{[^}]*margin:\s*32px 16px 8px/s,
+    )
+  })
 })

frontend/src/views/apps/SettingsApp.contract.test.ts

@@ -34,8 +34,5 @@ describe('SettingsApp Sky UI contract', () => {
     expect(source).toMatch(
       /\.settings-content--subpage\s*\{[^}]*padding-top:\s*0/,
     )
-    expect(source).toMatch(
-      /\.settings-content--subpage[\s\S]*?:deep\(\s*\.sky-settings-group:first-child\s*>\s*\.sky-settings-group__title:first-child\s*\)\s*\{[^}]*margin-top:\s*0/,
-    )
   })
 })

frontend/src/views/apps/SettingsApp.vue

@@ -1506,13 +1506,6 @@ onBeforeUnmount(() => {
   padding-top: 0;
 }
 
-.settings-content--subpage
-  > :deep(
-    .sky-settings-group:first-child > .sky-settings-group__title:first-child
-  ) {
-  margin-top: 0;
-}
-
 .settings-copy {
   margin: 0 var(--sky-space-1) var(--sky-space-4);
   color: var(--sky-muted);