From 5b6310a9805675e3abd777b08790254dd488c226 Mon Sep 17 00:00:00 2001
From: OpenClaw Assistant <assistant@openclaw.ai>
Date: Tue, 1 Sep 2026 20:44:48 +0200
Subject: [PATCH] fix: resolve mobile safe area and viewport issues

---
 index.html  | 4 ++--
 src/main.ts | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index 795748b..77588ba 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Pop! Pop! Pop!</title>
     <style>
         body {
@@ -13,7 +13,7 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 100vh;
+            height: 100dvh;
             width: 100vw;
         }
         canvas {
diff --git a/src/main.ts b/src/main.ts
index b89f286..1353289 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -105,8 +105,10 @@ class PopScene extends Phaser.Scene {
 
 const config = {
     type: Phaser.AUTO,
-    width: window.innerWidth,
-    height: window.innerHeight,
+    scale: {
+        mode: Phaser.Scale.RESIZE,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
     parent: 'game-container',
     scene: [PopScene],
     physics: {
