fix: fixed header, disable zoom, prevent overscroll bounce

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
     <title>ReSekai</title>
 

src/pages/GamePage.css

@@ -5,6 +5,12 @@
   flex-direction: column;
   background: #000;
   padding-top: env(safe-area-inset-top);
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .game-error {
@@ -17,6 +23,9 @@
 }
 
 .game-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
   display: flex;
   align-items: center;
   gap: 0.75rem;
@@ -216,9 +225,12 @@
 .messages-container {
   flex: 1;
   overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
   padding: 1rem;
   padding-left: max(1rem, env(safe-area-inset-left));
   padding-right: max(1rem, env(safe-area-inset-right));
+  padding-bottom: 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;