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.
