fix: prevent white background flash and overscroll on Safari iOS

- Set background-color: #101010 on html/body/.App so the Safari iOS
  rubber-band overscroll area is dark instead of white
- Always render body background style in ViewLoader (not just during
  Suspense fallback) so keyColour param and --background-color-override
  propagate to the body for the overscroll region
- Add viewport-fit=cover, apple-mobile-web-app meta tags for proper
  iOS notch/safe-area handling
- Fix manifest.json background_color from #ffffff to #101010
- Align theme_color across both manifests to #101010

https://claude.ai/code/session_016z5vU45pexTdkQV2eHJqh4

.github/workflows/build_electron.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   build_macos:
-    runs-on: macOS-latest
+    runs-on: macOS-26
 
     steps:
       - uses: actions/checkout@v6

apps/client/index.html

@@ -4,8 +4,10 @@
     <meta charset="utf-8" />
     <base href="/" />
     <link rel="icon" href="favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="theme-color" content="#101010" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="ontime" content="ontime - time keeping for live events" />
     <link rel="apple-touch-icon" href="ontime-logo.png" />
     <link rel="icon" type="image/png" href="ontime-logo.png" />

apps/client/public/manifest.json

@@ -14,6 +14,6 @@
   "scope": "./",
   "start_url": "./",
   "display": "",
-  "theme_color": "#121212",
-  "background_color": "#ffffff"
+  "theme_color": "#101010",
+  "background_color": "#101010"
 }

apps/client/public/site.webmanifest

@@ -2,7 +2,7 @@
   "name": "",
   "short_name": "",
   "icons": [{ "src": "ontime-logo.png", "sizes": "295x295", "type": "image/png" }],
-  "theme_color": "#2B5ABC",
+  "theme_color": "#101010",
   "background_color": "#101010",
   "display": "standalone"
 }

apps/client/src/index.scss

@@ -81,6 +81,8 @@ html,
   user-select: none;
   -webkit-app-region: drag;
   isolation: isolate;
+  // prevents Safari iOS from showing white in the overscroll (rubber-band) area
+  background-color: $ui-black;
 }
 
 // reset button styles

apps/client/src/views/ViewLoader.tsx

@@ -23,15 +23,19 @@ export default function ViewLoader({ children }: PropsWithChildren) {
   const searchParams = new URLSearchParams(window.location.search);
   const colourFromParams = searchParams.get('keyColour') ?? '#101010';
 
+  // always keep body background in sync so Safari iOS overscroll area matches the view
+  const bodyBgStyle = `body { background-color: var(--background-color-override, ${colourFromParams}); }`;
+
   return (
     <Suspense
       fallback={
         <>
-          <style>{`body { background: var(--background-color-override, ${colourFromParams}); }`}</style>
+          <style>{bodyBgStyle}</style>
           <Loader />
         </>
       }
     >
+      <style>{bodyBgStyle}</style>
       <OverrideStyles />
       {children}
     </Suspense>

apps/electron/entitlements.plist

@@ -8,7 +8,5 @@
 		<true/>
 		<key>com.apple.security.cs.allow-dyld-environment-variables</key>
 		<true/>
-		<key>com.apple.security.cs.disable-library-validation</key>
-		<true/>
 	</dict>
 </plist>

apps/electron/package.json

@@ -29,8 +29,7 @@
     "appId": "no.lightdev.ontime",
     "asar": true,
     "dmg": {
-      "artifactName": "ontime-macOS-${arch}.dmg",
-      "icon": "icon.icns"
+      "artifactName": "ontime-macOS-${arch}.dmg"
     },
     "mac": {
       "notarize": true,
@@ -46,7 +45,7 @@
         ]
       },
       "category": "public.app-category.productivity",
-      "icon": "icon.icns"
+      "icon": "ontime.icon"
     },
     "win": {
       "target": "nsis"

apps/electron/src/assets/ontime.icon/icon.json

@@ -0,0 +1,62 @@
+{
+  "fill-specializations" : [
+    {
+      "value" : "system-dark"
+    },
+    {
+      "appearance" : "dark",
+      "value" : "system-dark"
+    }
+  ],
+  "groups" : [
+    {
+      "layers" : [
+        {
+          "blend-mode-specializations" : [
+            {
+              "appearance" : "dark",
+              "value" : "normal"
+            }
+          ],
+          "glass-specializations" : [
+            {
+              "value" : false
+            },
+            {
+              "appearance" : "dark",
+              "value" : false
+            },
+            {
+              "appearance" : "tinted",
+              "value" : false
+            }
+          ],
+          "hidden" : false,
+          "image-name" : "ontime-icon.png",
+          "name" : "ontime-icon",
+          "position" : {
+            "scale" : 1,
+            "translation-in-points" : [
+              -0.5,
+              -113
+            ]
+          }
+        }
+      ],
+      "shadow" : {
+        "kind" : "neutral",
+        "opacity" : 0.5
+      },
+      "translucency" : {
+        "enabled" : true,
+        "value" : 0.5
+      }
+    }
+  ],
+  "supported-platforms" : {
+    "circles" : [
+      "watchOS"
+    ],
+    "squares" : "shared"
+  }
+}