From d2222c9b355e37ba2aaffc521a7dbfc19a5c5fac Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 20:26:03 +0200
Subject: [PATCH] FIX - align first Sky settings group

---
 frontend/src/ui/settings.css                     |  4 ++++
 .../src/ui/settings/SkySettingsGroup.test.ts     | 16 ++++++++++++++++
 .../src/views/apps/SettingsApp.contract.test.ts  |  3 ---
 frontend/src/views/apps/SettingsApp.vue          |  7 -------
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/frontend/src/ui/settings.css b/frontend/src/ui/settings.css
index 4a45ba6..6ad5d89 100644
--- a/frontend/src/ui/settings.css
+++ b/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;
diff --git a/frontend/src/ui/settings/SkySettingsGroup.test.ts b/frontend/src/ui/settings/SkySettingsGroup.test.ts
index 7a5a45d..86b537b 100644
--- a/frontend/src/ui/settings/SkySettingsGroup.test.ts
+++ b/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,
+    )
+  })
 })
diff --git a/frontend/src/views/apps/SettingsApp.contract.test.ts b/frontend/src/views/apps/SettingsApp.contract.test.ts
index 92b84e7..ff1a9b9 100644
--- a/frontend/src/views/apps/SettingsApp.contract.test.ts
+++ b/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/,
-    )
   })
 })
diff --git a/frontend/src/views/apps/SettingsApp.vue b/frontend/src/views/apps/SettingsApp.vue
index f9247bd..b50078d 100644
--- a/frontend/src/views/apps/SettingsApp.vue
+++ b/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);