From d433265afe3c7f8252ba153252c8bf8934c63c13 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Sat, 24 Jan 2026 23:29:27 -0800
Subject: [PATCH] fix: body styling works on settings

---
 src/app/layouts/app-layout.ts       | 30 +++++++++++++++++++++++++++--
 src/app/utils/styling.ts            |  3 +++
 src/app/views/settings.component.ts | 18 ++++++++++++-----
 3 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 src/app/utils/styling.ts

diff --git a/src/app/layouts/app-layout.ts b/src/app/layouts/app-layout.ts
index 966c4f4..8d865f0 100644
--- a/src/app/layouts/app-layout.ts
+++ b/src/app/layouts/app-layout.ts
@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, ViewEncapsulation } from "@angular/core";
 import { UnderTitlebar } from "../components/under-titlebar.component";
 import { RouterOutlet } from "@angular/router";
 
@@ -7,7 +7,33 @@ import { RouterOutlet } from "@angular/router";
   selector: "app-layout",
   template: `
     <app-under-titlebar />
-    <router-outlet></router-outlet>
+    <div class="__app_layout___mainContents">
+      <router-outlet></router-outlet>
+    </div>
   `,
+  encapsulation: ViewEncapsulation.None,
+  styles: [
+    `
+      app-layout {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .__app_layout___mainContents {
+        flex-grow: 1;
+        height: 1px;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .__app_layout___mainContents > *:not(router-outlet) {
+        flex-grow: 1;
+        height: 1px;
+        display: flex;
+        flex-direction: column;
+      }
+    `,
+  ],
 })
 export class AppLayout {}
diff --git a/src/app/utils/styling.ts b/src/app/utils/styling.ts
new file mode 100644
index 0000000..a1462bf
--- /dev/null
+++ b/src/app/utils/styling.ts
@@ -0,0 +1,3 @@
+export function setBodyBg(color: string) {
+  document.body.style.backgroundColor = color;
+}
diff --git a/src/app/views/settings.component.ts b/src/app/views/settings.component.ts
index 321378d..6ab083e 100644
--- a/src/app/views/settings.component.ts
+++ b/src/app/views/settings.component.ts
@@ -1,5 +1,6 @@
-import { Component } from "@angular/core";
+import { Component, effect } from "@angular/core";
 import { LightGlassOutlined } from "../components/light-glass-outlined";
+import { setBodyBg } from "../utils/styling";
 
 @Component({
   selector: "app-settings",
@@ -15,10 +16,13 @@ import { LightGlassOutlined } from "../components/light-glass-outlined";
   `,
   styles: [
     `
+      :host {
+        display: contents;
+      }
+
       .container {
-        min-height: 100vh;
-        /* TODO: Change to CSS variable */
-        background: #060606;
+        height: 1px;
+        flex-grow: 1;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;
@@ -61,4 +65,8 @@ import { LightGlassOutlined } from "../components/light-glass-outlined";
   ],
   imports: [LightGlassOutlined],
 })
-export class Settings {}
+export class Settings {
+  _ = effect(() => {
+    setBodyBg("#060606");
+  });
+}
-- 
2.51.2