From e85d93270b9a42a924c2c0d6fdeeb75e70ae5797 Mon Sep 17 00:00:00 2001
From: April Eaton <dev@aprileaton.net>
Date: Mon, 12 Jan 2026 17:41:57 +0100
Subject: [PATCH] Restructuring for better layout and code reuse

---
 client/src/App.css                      | 27 +++++++++++---
 client/src/components/header/header.css |  8 +++-
 client/src/pages/about.tsx              |  7 ++--
 client/src/pages/page.tsx               | 11 ++++++
 client/src/pages/root.tsx               |  7 ++--
 client/tsconfig.json                    | 49 ++++++++++++++-----------
 6 files changed, 73 insertions(+), 36 deletions(-)
 create mode 100644 client/src/pages/page.tsx

diff --git a/client/src/App.css b/client/src/App.css
index 5cebb30..f202981 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -39,12 +39,29 @@
 }
 
 html {
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 body {
-    height: 100%;
-    width: 100%;
+    min-height: 100svh;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+}
+
+#app {
+    height: 100%;
+    min-width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+}
+
+#body {
+    max-width: 40rem;
+    width: 100%;
+    height: 100%;
 }
diff --git a/client/src/components/header/header.css b/client/src/components/header/header.css
index ef0aaaf..a5862d7 100644
--- a/client/src/components/header/header.css
+++ b/client/src/components/header/header.css
@@ -1,8 +1,14 @@
 header {
+    --margin: 0.25rem;
+    --padding: 0.25rem;
     border-width: 2px;
     border-style: solid;
 
-    position: sticky top;
+    position: sticky;
+
+    margin: var(--margin);
+    padding: var(--padding);
+    width: calc(100% - (2 * var(--margin)) - (2 * var(--padding)) - 4px);
 }
 
 nav {
diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx
index 7af40d5..a8dd87e 100644
--- a/client/src/pages/about.tsx
+++ b/client/src/pages/about.tsx
@@ -1,16 +1,15 @@
-import { Header } from "/src/components/header";
+import { Page } from "/src/pages/page";
 import "/src/App.css";
 
 export function About() {
   return (
-    <>
-      <Header />
+    <Page>
       <h1>About Starve Me Now!</h1>
       <p>
         Firstly, this is intended for those who have a starvation/diet control
         fetish. This is <b>not</b> intended to help with weight loss or similar
         reasons to fast.
       </p>
-    </>
+    </Page>
   );
 }
diff --git a/client/src/pages/page.tsx b/client/src/pages/page.tsx
new file mode 100644
index 0000000..c48ab01
--- /dev/null
+++ b/client/src/pages/page.tsx
@@ -0,0 +1,11 @@
+import { Header } from "@/components/header";
+import "@/App.css";
+
+export function Page(props: { children: React.ReactNode }) {
+  return (
+    <>
+      <Header />
+      <article id="body">{props.children}</article>
+    </>
+  );
+}
diff --git a/client/src/pages/root.tsx b/client/src/pages/root.tsx
index 7057d23..c8cf456 100644
--- a/client/src/pages/root.tsx
+++ b/client/src/pages/root.tsx
@@ -1,14 +1,13 @@
-import { Header } from "/src/components/header";
+import { Page } from "/src/pages/page";
 import "/src/App.css";
 
 export function Root() {
   return (
-    <>
-      <Header />
+    <Page>
       <h1>Starve Me Now!</h1>
       <p>
         Edit <code>src/App.tsx</code> to get started!
       </p>
-    </>
+    </Page>
   );
 }
diff --git a/client/tsconfig.json b/client/tsconfig.json
index ddc2511..d6ccc11 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -1,29 +1,34 @@
 {
-  "compilerOptions": {
-    /* Visit https://aka.ms/tsconfig to read more about this file */
-    "target": "ES2020",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "jsx": "react-jsx",
-    "useDefineForClassFields": true,
+    "compilerOptions": {
+        /* Visit https://aka.ms/tsconfig to read more about this file */
+        "target": "ES2020",
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "jsx": "react-jsx",
+        "useDefineForClassFields": true,
 
-    /* Modules */
-    "module": "ESNext",
-    "moduleResolution": "bundler",
+        /* Modules */
+        "module": "ESNext",
+        "moduleResolution": "bundler",
 
-    /* Emit */
-    "noEmit": true,
+        /* Emit */
+        "noEmit": true,
 
-    /* Interop Constraints */
-    "isolatedModules": true,
-    "allowSyntheticDefaultImports": true,
-    "allowImportingTsExtensions": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
+        /* Interop Constraints */
+        "isolatedModules": true,
+        "allowSyntheticDefaultImports": true,
+        "allowImportingTsExtensions": true,
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
 
-    /* Type Checking */
-    "strict": true,
+        /* Type Checking */
+        "strict": true,
 
-    /* Completeness */
-    "skipLibCheck": true
-  }
+        /* Completeness */
+        "skipLibCheck": true,
+
+        "baseUrl": "./src",
+        "paths": {
+            "@/*": ["*"]
+        }
+    }
 }