Use Capacitor's native WebView resize mode on iOS instead of CSS-based
workarounds. When keyboard appears, the WebView itself shrinks so 100vh
automatically fits above the keyboard.
- Configure iOS to use `resize: 'native'` (Android keeps `resize: 'body'`)
- Add scrollIntoViewIfNeeded() to scroll focused inputs into view
- Add proper cleanup for keyboard event listeners
- Improve flexbox shrinking in fullscreen markdown dialog
Angular Material overlay backdrops were not being properly cleared between
tag operations, causing subsequent clicks to timeout when overlays blocked
element interactions.
Added ensureOverlaysClosed() helper with:
- Early exit if no overlays present (performance)
- Escape key dismissal with retry for stacked overlays
- Logging for debugging when fallbacks trigger
- Uses Playwright's native locator.waitFor() instead of waitForFunction()
- Cleanup at operation start (prevent blocking) and end (clean state)
Benefits:
- Eliminates fixed timeouts, uses smart waiting (tests run 2x faster)
- Handles edge cases like stacked overlays
- Provides visibility into when overlays are unexpectedly present
Fixes 4 failing tests:
- Tag CRUD: remove tag via context menu
- Tag CRUD: delete tag and update tasks
- Tag CRUD: navigate to tag view
- Menu: toggle tags via submenu
Add iOS-specific UX improvements:
Safe Areas:
- Add CSS variables for safe area insets (notch, home indicator)
- Add body classes: isNativeMobile, isIOS, isKeyboardVisible
- Apply safe area padding on native mobile platforms
Keyboard Handling:
- Install @capacitor/keyboard plugin
- Track keyboard visibility via keyboardWillShow/Hide events
- Set --keyboard-height CSS variable for layout adjustments
- Remove bottom safe area padding when keyboard is visible
Status Bar:
- Install @capacitor/status-bar plugin
- Sync status bar style with app dark/light theme
- Configure overlaysWebView: false in capacitor.config.ts
These changes ensure proper display on iPhone devices with
notch/Dynamic Island and home indicator.
