@hmduc16031996/claude-mb-bridge 2.5.3 → 2.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmduc16031996/claude-mb-bridge",
-  "version": "2.5.3",
+  "version": "2.5.5",
   "description": "Bridge between Claude Code CLI and your mobile app via WebView",
   "type": "module",
   "main": "dist/index.js",

package/public/app.js

@@ -1724,6 +1724,40 @@ class ClaudeRemote {
 
     // Always show in mobile flex flow
     this.elements.mainScreen.classList.add('mobile-keys-visible');
+
+    // Handle initial sizing
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', () => this.onViewportChange());
+      window.visualViewport.addEventListener('scroll', () => this.onViewportChange());
+      this.onViewportChange();
+    }
+  }
+
+  onViewportChange() {
+    if (!window.visualViewport) return;
+
+    // Adjust app height to match visual viewport (the actual visible area above the keyboard)
+    const viewportHeight = window.visualViewport.height;
+    const bodyHeight = window.innerHeight;
+
+    // On some mobile browsers, setting 100% isn't enough when keyboard is open
+    // We explicitly set the app height to the visual viewport height
+    const app = document.getElementById('app');
+    if (app) {
+      app.style.height = `${viewportHeight}px`;
+    }
+
+    // Recalculate terminal size for the new container height
+    this.fitTerminal();
+
+    // Ensure terminal scrolled to bottom so cursor is visible above keyboard
+    // Only if the current session is terminal-based
+    if (this.currentSessionId && this.terminal) {
+      this.terminal.scrollToBottom();
+    }
+
+    // Log for debugging visibility if needed
+    // console.log(`Viewport height: ${viewportHeight}, Body height: ${bodyHeight}`);
   }
 
 
@@ -1731,8 +1765,8 @@ class ClaudeRemote {
     if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.currentSessionId) return;
 
     switch (key) {
-      case 'escape':
-        this.ws.send('\x1b'); // ESC
+      case 'enter':
+        this.ws.send('\r'); // Enter (CR)
         break;
       case 'ctrl':
         this.setCtrlActive(!this.ctrlActive);

package/public/index.html

@@ -132,7 +132,7 @@
 
       <!-- Mobile Control Keys Toolbar (visible on mobile only) -->
       <div id="mobile-keys" class="mobile-keys" role="toolbar" aria-label="Control keys">
-        <button type="button" class="mobile-key" data-key="escape" aria-label="Escape">Esc</button>
+        <button type="button" class="mobile-key" data-key="enter" aria-label="Enter">Ent</button>
         <button type="button" class="mobile-key mobile-key-modifier" data-key="ctrl" aria-label="Control modifier" aria-pressed="false">Ctrl</button>
         <button type="button" class="mobile-key mobile-key-modifier" data-key="shift" aria-label="Shift modifier" aria-pressed="false">Shift</button>
         <button type="button" class="mobile-key" data-key="tab" aria-label="Tab">Tab</button>

package/public/styles.css

@@ -63,11 +63,12 @@ body {
 
 #app {
   width: 100%;
-  height: 100%;
+  height: 100vh; /* Primary height */
   display: flex;
   flex-direction: column;
   position: relative;
   z-index: 1;
+  overflow: hidden;
 }
 
 /* ===== SCREENS ===== */