Merge pull request #28 from scottlu/claude/lock-screen-rotation-home-UCThh

Author: scottlu

src/app.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import { Screen, GameStatus } from './types/game';
 import { useMinesweeper } from './hooks/useMinesweeper';
 import { useSettings } from './hooks/useSettings';
@@ -49,24 +49,8 @@ export default function App() {
     setScreen(Screen.Game);
   }, [game.newGame]);
 
-  const rotationStyle = useMemo(() => {
-    if (!isLandscape) {
-      return undefined;
-    }
-    return {
-      transform: 'rotate(-90deg)',
-      transformOrigin: 'top left',
-      width: window.innerHeight,
-      height: window.innerWidth,
-      position: 'fixed' as const,
-      top: window.innerHeight,
-      left: 0,
-      overflow: 'hidden',
-    };
-  }, [isLandscape]);
-
   return (
-    <div className="flex flex-col h-full" style={rotationStyle}>
+    <div className="app-root flex flex-col h-full">
       {screen === Screen.Game && (
         <>
           <Header

src/index.css

@@ -17,4 +17,18 @@ html, body, #root {
   -webkit-user-select: none;
   user-select: none;
   -webkit-touch-callout: none;
+}
+
+/* Force portrait layout when device is in landscape on phones */
+@media (orientation: landscape) and (max-height: 500px) {
+  .app-root {
+    transform: rotate(-90deg);
+    transform-origin: top left;
+    width: 100dvh;
+    height: 100dvw;
+    position: fixed;
+    top: 100dvh;
+    left: 0;
+    overflow: hidden;
+  }
 }