@littlepartytime/dev-kit 1.22.1 → 1.22.3

package/dist/webapp/pages/Mobile.tsx

@@ -5,13 +5,7 @@ import PlatformTakeover from '../components/PlatformTakeover';
 declare const __SOCKET_PORT__: number;
 declare const __DEV_KIT_MODE__: string;
 
-/**
- * Root container mirrors the platform's room page:
- *   <div class="h-[100dvh] flex flex-col overflow-hidden">
- * No position:fixed — uses 100dvh which shrinks with mobile keyboard.
- */
-const rootStyle: React.CSSProperties = {
-  height: '100dvh',
+const baseStyle: React.CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
   overflow: 'hidden',
@@ -20,17 +14,59 @@ const rootStyle: React.CSSProperties = {
   fontFamily: 'system-ui, -apple-system, sans-serif',
 };
 
-/**
- * Game outer wrapper mirrors the platform's flex-1 scrollable area:
- *   <div class="flex-1 min-h-0 overflow-y-auto">
- */
 const gameOuterStyle: React.CSSProperties = {
   flex: 1,
   minHeight: 0,
   overflowY: 'auto',
 };
 
+/**
+ * Track actual visible height via VisualViewport API.
+ *
+ * On iOS Safari (non-PWA), 100dvh does NOT shrink when the keyboard opens.
+ * We use visualViewport.height to detect the keyboard and override the
+ * container height only while it's open. When the keyboard closes, we
+ * revert to 100dvh so Safari toolbar/address bar changes don't leave
+ * a dead zone at the bottom.
+ */
+function useViewportHeight(): string {
+  const [height, setHeight] = useState('100dvh');
+  const initialHeight = useRef(0);
+
+  useEffect(() => {
+    const vv = window.visualViewport;
+    if (!vv) return;
+
+    // Capture the full viewport height on first load (no keyboard)
+    initialHeight.current = vv.height;
+
+    const KEYBOARD_THRESHOLD = 100; // px — if viewport shrinks by more than this, keyboard is open
+
+    const update = () => {
+      window.scrollTo(0, 0);
+      const shrunk = initialHeight.current - vv.height;
+      if (shrunk > KEYBOARD_THRESHOLD) {
+        // Keyboard is open: use exact pixel height so content compresses
+        setHeight(`${vv.height}px`);
+      } else {
+        // Keyboard is closed: use 100dvh to fill the screen fully
+        setHeight('100dvh');
+      }
+    };
+
+    vv.addEventListener('resize', update);
+    vv.addEventListener('scroll', update);
+    return () => {
+      vv.removeEventListener('resize', update);
+      vv.removeEventListener('scroll', update);
+    };
+  }, []);
+
+  return height;
+}
+
 export default function Mobile() {
+  const viewportHeight = useViewportHeight();
   const [socket, setSocket] = useState<Socket | null>(null);
   const [nickname, setNickname] = useState('');
   const [joined, setJoined] = useState(false);
@@ -121,7 +157,7 @@ export default function Mobile() {
   // Join screen
   if (!joined) {
     return (
-      <div style={{ ...rootStyle, alignItems: 'center', justifyContent: 'center' }}>
+      <div style={{ ...baseStyle, height: viewportHeight, alignItems: 'center', justifyContent: 'center' }}>
         <div style={{ width: '85%', maxWidth: 320 }}>
           <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16, textAlign: 'center' }}>Join Game</h2>
           <input
@@ -146,7 +182,7 @@ export default function Mobile() {
   // Lobby
   if (room.phase === 'lobby' || room.phase === 'ready') {
     return (
-      <div style={{ ...rootStyle, padding: 16 }}>
+      <div style={{ ...baseStyle, height: viewportHeight, padding: 16 }}>
         <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16 }}>Lobby</h2>
         <div style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 8 }}>
           {room.players.map((p: any) => (
@@ -187,7 +223,7 @@ export default function Mobile() {
   //     div.flex-1.min-h-0.overflow-y-auto           (game outer)
   //       div.game-sandbox                            (safe area padding)
   return (
-    <div style={rootStyle}>
+    <div style={{ ...baseStyle, height: viewportHeight }}>
       <div style={gameOuterStyle}>
         <div className="game-sandbox">
           {gameOver ? (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@littlepartytime/dev-kit",
-  "version": "1.22.1",
+  "version": "1.22.3",
   "description": "Development toolkit CLI for Little Party Time game developers",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",