diff --git a/CLAUDE.md b/CLAUDE.md index a9d44369..b5aab346 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -16,7 +16,7 @@ When user says "COM": 1. Increment version in BOTH `package.json` AND `CLAUDE.md` 2. Run: `git add -A && git commit -m "chore: bump version to X.XXXX" && git push && npm run build && systemctl --user restart claudeman-web` -**Version**: 0.1452 (must match `package.json`) +**Version**: 0.1453 (must match `package.json`) ## Project Overview diff --git a/package.json b/package.json index 8194e563..cf7c707c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "claudeman", - "version": "0.1452", + "version": "0.1453", "description": "The missing control plane for Claude Code - run 20 autonomous agents with real-time monitoring and session persistence", "type": "module", "main": "dist/index.js", diff --git a/src/web/public/app.js b/src/web/public/app.js index 2668b396..df95c04d 100644 --- a/src/web/public/app.js +++ b/src/web/public/app.js @@ -192,7 +192,6 @@ const KeyboardHandler = { isKeyboardVisible: false, keyboardHeight: 0, resizeHandler: null, - scrollHandler: null, /** Initialize keyboard detection */ init() { @@ -202,16 +201,16 @@ const KeyboardHandler = { const vv = window.visualViewport; if (!vv) return; - // Store initial height (update on orientation change) - this.initialViewportHeight = vv.height; + // Store initial height after a brief delay to let viewport stabilize + setTimeout(() => { + this.initialViewportHeight = window.visualViewport?.height || window.innerHeight; + }, 500); - // Create bound handlers for cleanup + // Create bound handler for cleanup this.resizeHandler = this.handleResize.bind(this); - this.scrollHandler = this.handleVisualViewportScroll.bind(this); // Listen for visualViewport resize (keyboard open/close) vv.addEventListener('resize', this.resizeHandler); - vv.addEventListener('scroll', this.scrollHandler); // Update initial height on orientation change window.addEventListener('orientationchange', () => { @@ -219,7 +218,15 @@ const KeyboardHandler = { if (window.visualViewport) { this.initialViewportHeight = window.visualViewport.height; } - }, 200); + }, 300); + }); + + // Also update on regular resize (address bar hide/show) + window.addEventListener('resize', () => { + // Only update if keyboard is NOT visible (address bar change) + if (!this.isKeyboardVisible && window.visualViewport) { + this.initialViewportHeight = window.visualViewport.height; + } }); // Focus event handling for scrolling inputs into view @@ -244,15 +251,6 @@ const KeyboardHandler = { } }, - /** Handle visualViewport scroll - keep fixed elements positioned on iOS */ - handleVisualViewportScroll() { - const vv = window.visualViewport; - if (!vv || !this.isKeyboardVisible) return; - - // Update CSS property for any elements that need to track viewport offset - document.documentElement.style.setProperty('--viewport-offset-top', `${vv.offsetTop}px`); - }, - /** Update keyboard visibility state */ updateKeyboardState(visible, height) { if (this.isKeyboardVisible === visible && this.keyboardHeight === height) return; @@ -260,14 +258,9 @@ const KeyboardHandler = { this.isKeyboardVisible = visible; this.keyboardHeight = height; - // Update CSS custom properties + // Update CSS custom property document.documentElement.style.setProperty('--keyboard-height', `${height}px`); - // Reset viewport offset when keyboard closes - if (!visible) { - document.documentElement.style.setProperty('--viewport-offset-top', '0px'); - } - // Toggle class for CSS targeting document.body.classList.toggle('keyboard-visible', visible); diff --git a/src/web/public/index.html b/src/web/public/index.html index ddcc210a..49b5e213 100644 --- a/src/web/public/index.html +++ b/src/web/public/index.html @@ -2,7 +2,7 @@ - + Claudeman diff --git a/src/web/public/styles.css b/src/web/public/styles.css index 6a41e433..f6aa9460 100644 --- a/src/web/public/styles.css +++ b/src/web/public/styles.css @@ -7886,7 +7886,7 @@ kbd { scroll-margin-top: 80px; } - .keyboard-visible .modal-body { + .keyboard-visible .modal.active .modal-body { max-height: calc(60vh - var(--keyboard-height) / 2); overflow-y: auto; } @@ -8417,15 +8417,15 @@ kbd { } /* Modal adjustments when keyboard is visible */ - .keyboard-visible .modal-content { + .keyboard-visible .modal.active .modal-content { /* Don't take full height - resize with keyboard */ height: auto; - max-height: calc(100dvh - var(--keyboard-height)); + max-height: calc(100vh - var(--keyboard-height)); } - .keyboard-visible .modal-body { + .keyboard-visible .modal.active .modal-body { /* Limit modal body height when keyboard up - make room for header/footer */ - max-height: calc(50dvh - var(--keyboard-height) / 3); + max-height: calc(50vh - var(--keyboard-height) / 3); overflow-y: auto; -webkit-overflow-scrolling: touch; } @@ -8436,7 +8436,6 @@ kbd { ============================================================================ */ :root { --keyboard-height: 0px; - --viewport-offset-top: 0px; } .keyboard-visible .toolbar {