@littlepartytime/dev-kit 1.22.4-debug.0 → 1.22.4

package/dist/webapp/index.html

@@ -11,12 +11,22 @@
     html { height: 100%; }
     body { height: 100%; min-height: 100%; }
 
-    /* ── Game sandbox: mirrors platform globals.css ── */
+    /* ── Game sandbox: based on platform globals.css ── */
+    /* Platform uses height:100% which works in PWA/Capacitor.
+       In a regular browser, keyboard interaction breaks the CSS
+       height chain for descendant elements. Using flex + stretch
+       forces game renderers to fill the container regardless. */
     .game-sandbox {
       height: 100%;
+      display: flex;
+      flex-direction: column;
       padding-top: env(safe-area-inset-top, 0px);
       padding-bottom: env(safe-area-inset-bottom, 0px);
     }
+    .game-sandbox > * {
+      flex: 1;
+      min-height: 0;
+    }
     .game-sandbox, .game-sandbox * {
       -webkit-user-select: auto;
       user-select: auto;

package/dist/webapp/pages/Mobile.tsx

@@ -21,49 +21,20 @@ const gameOuterStyle: React.CSSProperties = {
 };
 
 /**
- * Diagnostic: track viewport values for debugging keyboard/layout issues.
- * Shows a small overlay on screen with real-time values.
- * TODO: Remove after debugging is complete.
+ * Track viewport height for mobile keyboard handling.
+ * In regular Safari (non-PWA), 100dvh doesn't shrink with keyboard.
+ * Uses VisualViewport to detect keyboard and switch to pixel height.
  */
-interface ViewportDebug {
-  height: string;
-  debug: {
-    vvHeight: number;
-    vvOffsetTop: number;
-    innerHeight: number;
-    documentHeight: number;
-    scrollY: number;
-    rootHeight: number;
-  };
-}
-
-function useViewportHeight(): ViewportDebug {
+function useViewportHeight(): string {
   const [height, setHeight] = useState('100dvh');
-  const [debug, setDebug] = useState({
-    vvHeight: 0, vvOffsetTop: 0, innerHeight: 0,
-    documentHeight: 0, scrollY: 0, rootHeight: 0,
-  });
   const initialHeight = useRef(0);
 
   useEffect(() => {
     const vv = window.visualViewport;
     if (!vv) return;
-
     initialHeight.current = vv.height;
-
     const KEYBOARD_THRESHOLD = 100;
-
     const update = () => {
-      const root = document.getElementById('root');
-      setDebug({
-        vvHeight: Math.round(vv.height),
-        vvOffsetTop: Math.round(vv.offsetTop),
-        innerHeight: window.innerHeight,
-        documentHeight: document.documentElement.clientHeight,
-        scrollY: Math.round(window.scrollY),
-        rootHeight: root ? root.clientHeight : 0,
-      });
-
       window.scrollTo(0, 0);
       const shrunk = initialHeight.current - vv.height;
       if (shrunk > KEYBOARD_THRESHOLD) {
@@ -72,8 +43,6 @@ function useViewportHeight(): ViewportDebug {
         setHeight('100dvh');
       }
     };
-
-    update();
     vv.addEventListener('resize', update);
     vv.addEventListener('scroll', update);
     return () => {
@@ -82,18 +51,11 @@ function useViewportHeight(): ViewportDebug {
     };
   }, []);
 
-  return { height, debug };
+  return height;
 }
 
-const debugOverlayStyle: React.CSSProperties = {
-  position: 'fixed', bottom: 0, left: 0, right: 0,
-  background: 'rgba(0,0,0,0.85)', color: '#0f0',
-  fontSize: 10, fontFamily: 'monospace', padding: 4,
-  zIndex: 99999, pointerEvents: 'none', lineHeight: 1.4,
-};
-
 export default function Mobile() {
-  const { height: viewportHeight, debug } = useViewportHeight();
+  const viewportHeight = useViewportHeight();
   const [socket, setSocket] = useState<Socket | null>(null);
   const [nickname, setNickname] = useState('');
   const [joined, setJoined] = useState(false);
@@ -263,10 +225,6 @@ export default function Mobile() {
           )}
         </div>
       </div>
-      {/* DEBUG: viewport diagnostic overlay — remove after fixing */}
-      <div style={debugOverlayStyle}>
-        container: {viewportHeight} | vv: {debug.vvHeight} | vvOff: {debug.vvOffsetTop} | inner: {debug.innerHeight} | doc: {debug.documentHeight} | scrollY: {debug.scrollY} | root: {debug.rootHeight}
-      </div>
     </div>
   );
 }

package/package.json

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