app: mobile UX audit — safe areas, touch targets, scroll, haptics

[nadavosa]

Context

Sub-issue of #535. Can be done in parallel with #651–655. Audits and fixes mobile-specific UX issues that don't surface in the browser but matter in the native shell.

Areas to audit and fix

1. Safe area insets (notch + home bar)

On iPhone (notch/dynamic island) and modern Android, content can be obscured by system UI. Add CSS env variables:

```css
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
```

Key areas:

• Bottom nav bar — must sit above the home indicator
• Modal / dialog overlays
• Toasts (currently may appear behind the home bar)

In next.config.ts, the viewport meta tag should include viewport-fit=cover:
```html

```

2. Touch target sizes

All interactive elements must be at least 44×44pt (Apple HIG) / 48×48dp (Material). Audit:

• Nav bar icons
• Table row action buttons (edit/delete) — currently ~20px icons with small hit areas
• Filter checkboxes and accordion headers

3. Scroll behaviour

• Ensure -webkit-overflow-scrolling: touch (momentum scrolling) on scrollable containers
• Prevent body scroll when a modal is open (currently may cause double-scroll on iOS)
• Pull-to-refresh: disable or implement properly (default browser pull-to-refresh looks broken in Capacitor)

4. Keyboard / input behaviour

• Inputs should not be hidden behind the keyboard when focused. Use @capacitor/keyboard to listen for keyboardWillShow and adjust scroll position.
• Disable autocorrect, autocapitalize on email and search inputs.

5. Haptic feedback

Add subtle haptic feedback on key actions using @capacitor/haptics:
```ts
import { Haptics, ImpactStyle } from '@capacitor/haptics';
await Haptics.impact({ style: ImpactStyle.Light }); // on button tap
await Haptics.notification({ type: NotificationType.Success }); // on save success
```

6. Bootstrap removal

The layout imports Bootstrap CSS from CDN (currently in layout.tsx). On mobile this adds ~30 KB of unused CSS and the CDN call adds latency. Audit what Bootstrap is actually used for and replace with project-native styles or remove entirely.

Tasks

• Add viewport-fit=cover to viewport meta tag
• Apply safe-area-inset padding to bottom nav and affected containers
• Audit + fix touch target sizes (min 44×44pt)
• Fix modal body-scroll lock on iOS
• Disable or handle pull-to-refresh in Capacitor WebView
• Install @capacitor/keyboard and handle keyboard show/hide
• Install @capacitor/haptics and add to primary CTAs and save actions
• Audit Bootstrap usage and remove or replace
• Test on real device (iPhone + Android) — not just simulator

Depends on

#649 (Capacitor setup — needed to test on-device)