From d18f64f0c882b42b9fa116fbcd0799315d14dc6d Mon Sep 17 00:00:00 2001
From: pdelfan <pdelfan@gmail.com>
Date: Sat, 14 Mar 2026 12:51:59 -0700
Subject: [PATCH] chore: viewport data

---
 src/webapp/app/layout.tsx  | 20 ++++++++++++++++++--
 src/webapp/app/manifest.ts |  3 ++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/webapp/app/layout.tsx b/src/webapp/app/layout.tsx
index e592f06a..b3c78ac0 100644
--- a/src/webapp/app/layout.tsx
+++ b/src/webapp/app/layout.tsx
@@ -1,11 +1,24 @@
 import { Analytics } from '@vercel/analytics/next';
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import GlobalStyles from '@/styles/global.module.css';
 import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core';
 import { Hanken_Grotesk } from 'next/font/google';
 import Providers from '@/providers';
 import { SPLASH_IMAGES } from '@/lib/consts/images';
 
+export const viewport: Viewport = {
+  themeColor: [
+    {
+      media: '(prefers-color-scheme: light)',
+      color: 'var(--mantine-color-body)',
+    },
+    {
+      media: '(prefers-color-scheme: dark)',
+      color: 'var(--mantine-color-body)',
+    },
+  ],
+};
+
 export const metadata: Metadata = {
   title: 'Semble — A social knowledge network for research',
   description: `Follow your peers' research trails. Surface and discover new connections. Built on ATProto so you own your data.`,
@@ -15,7 +28,10 @@ export const metadata: Metadata = {
     statusBarStyle: 'default',
     startupImage: ['/semble-icon-192x192.png', ...SPLASH_IMAGES],
   },
-  other: { 'apple-mobile-web-app-capable': 'yes' },
+  other: {
+    'apple-mobile-web-app-capable': 'yes',
+    'mobile-web-app-capable': 'yes',
+  },
 };
 
 const hankenGrotesk = Hanken_Grotesk({
diff --git a/src/webapp/app/manifest.ts b/src/webapp/app/manifest.ts
index a7a36b97..6348843d 100644
--- a/src/webapp/app/manifest.ts
+++ b/src/webapp/app/manifest.ts
@@ -8,8 +8,9 @@ export default function manifest(): MetadataRoute.Manifest {
     description: 'A social knowledge network for research',
     start_url: '/home',
     display: 'standalone',
-    background_color: '#ffffff',
+    background_color: 'var(--mantine-color-body)',
     theme_color: theme.colors?.orange?.[6],
+    orientation: 'portrait',
     icons: [
       {
         src: '/semble-icon-192x192.png',
-- 
2.51.2