From 1193963902ee000ccf3af030267dbe6ff0c277fe Mon Sep 17 00:00:00 2001
From: Christopher Barnes <christopher@barnes.biz>
Date: Mon, 3 Nov 2025 14:48:54 +0100
Subject: [PATCH 1/3] feat: add viewport

---
 src/app/layout.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 325e8dd..6ed3a69 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next"
+import type { Metadata, Viewport } from "next"
 import { Geist, Geist_Mono } from "next/font/google"
 import type { ReactNode } from "react"
 import "./globals.css"
@@ -11,6 +11,12 @@ export const metadata: Metadata = {
   description: "Personal website of Christopher Barnes",
 }
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+}
+
 export default function RootLayout({
   children,
 }: Readonly<{

From 97d9c7c1b21917769d25bb832d16aeceb94e1272 Mon Sep 17 00:00:00 2001
From: Christopher Barnes <christopher@barnes.biz>
Date: Mon, 3 Nov 2025 14:59:42 +0100
Subject: [PATCH 2/3] wtf

---
 src/app/globals.css | 45 ++++++++++++++++++++++++++++++++++++++++++++-
 src/app/layout.tsx  | 14 ++++++++++++--
 2 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 2118453..6449fe8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -37,6 +37,10 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  --safe-top: env(safe-area-inset-top);
+  --safe-right: env(safe-area-inset-right);
+  --safe-bottom: env(safe-area-inset-bottom);
+  --safe-left: env(safe-area-inset-left);
 }
 
 .dark {
@@ -73,9 +77,48 @@
   --sidebar-border: oklch(0.269 0 0);
   --sidebar-ring: oklch(0.439 0 0);
 }
+.page {
+  min-height: 100dvh; /* use dynamic viewport to avoid iOS URL bar jumps */
+  padding-top: var(--safe-top);
+  padding-right: var(--safe-right);
+  padding-bottom: var(--safe-bottom);
+  padding-left: var(--safe-left);
+}
+
+/* Utilities for fixed headers/footers that must clear safe areas */
+.fixed-top {
+  position: fixed;
+  inset: 0 0 auto 0;
+  padding-top: var(--safe-top);
+}
+
+.fixed-bottom {
+  position: fixed;
+  inset: auto 0 0 0;
+  padding-bottom: var(--safe-bottom);
+}
+
+/* Optional touch target helper for bottom bars */
+.touch-target {
+  padding-bottom: max(16px, var(--safe-bottom));
+}
+
+/* Tailwind font hook if you use the font variables */
+.font-sans {
+  font-family: var(--font-geist), ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji",
+    "Segoe UI Emoji";
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  background: #ffffff; /* match themeColor (light) */
+}
 
 @theme inline {
-  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
   --font-sans: "Geist", "Geist Fallback";
   --font-mono: "Geist Mono", "Geist Mono Fallback";
   --color-background: var(--background);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6ed3a69..9d263b3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,16 +6,26 @@ import "./globals.css"
 const _geist = Geist({ subsets: ["latin"] })
 const _geistMono = Geist_Mono({ subsets: ["latin"] })
 
+
 export const metadata: Metadata = {
   title: "barnes.biz",
   description: "Personal website of Christopher Barnes",
-}
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "black-translucent",
+    title: "barnes.biz",
+  },
+};
 
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
   viewportFit: "cover",
-}
+  interactiveWidget: "resizes-content",
+  colorScheme: "light dark",
+};
 
 export default function RootLayout({
   children,

From af20f1cf0fb0f06eec6f59dafe63f56bb5e9fe55 Mon Sep 17 00:00:00 2001
From: Christopher Barnes <christopher@barnes.biz>
Date: Fri, 14 Nov 2025 10:27:05 +0100
Subject: [PATCH 3/3] add viewport

---
 src/app/layout.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8eae2d1..a9b03a5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next"
+import type { Metadata, Viewport } from "next"
 import { Geist, Geist_Mono } from "next/font/google"
 import type { ReactNode } from "react"
 import "./globals.css"
@@ -6,7 +6,6 @@ import "./globals.css"
 const _geist = Geist({ subsets: ["latin"] })
 const _geistMono = Geist_Mono({ subsets: ["latin"] })
 
-
 export const metadata: Metadata = {
   metadataBase: new URL("https://barnes.biz"),
   title: "Christopher Barnes | Cloud Systems Engineer",
@@ -28,6 +27,14 @@ export const metadata: Metadata = {
   },
 }
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: 'cover',
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{