need4deed-org / need4deed-org/fe
app: mobile UX audit — safe areas, touch targets, scroll, haptics
@Justber79 is already working on this.
Since Sep 16, 2026.
- Dominant language
- TypeScript
- Stars
- 3
- Forks
- 24
- Avg merge
- 2d 16h
- Merged PRs (30d)
- 44
Description
Part of https://github.com/need4deed-org/fe/issues/535. Can be done in parallel with other Capacitor issues.
Context
Once the app runs inside a native mobile shell (Capacitor), some UX issues appear on real devices that don't show up in the browser. This issue tracks auditing and fixing those.
Areas to cover
1. Safe area insets (notch, home bar)
On modern iPhones and Androids, system UI (camera notch, home indicator) can overlap app content. The layout needs to respect these safe areas — especially the bottom navigation bar, modals, and toast messages.
2. Touch target sizes
Interactive elements (buttons, checkboxes, icons, accordion headers) should be large enough to tap comfortably — at least 44×44 points. Currently some elements are too small on mobile.
3. Scroll behaviour
- Scrollable areas should have smooth momentum scrolling on iOS
- When a modal is open, the background page should not scroll
- Pull-to-refresh should either be disabled or handled properly inside Capacitor (the default browser behaviour looks broken in a native shell)
4. Keyboard / input behaviour
- When a user focuses an input, it should not be hidden behind the keyboard
- Email and search inputs should not trigger autocorrect or autocapitalise
5. Haptic feedback
Key actions (button taps, save success) should have subtle haptic feedback using the Capacitor haptics plugin.
6. Bootstrap removal
The app currently loads Bootstrap CSS, which adds unnecessary weight on mobile. Audit what is actually used and remove or replace it with project styles.
Checklist
- Safe area insets applied to bottom nav and modals
- Touch targets audited and fixed (min 44×44pt)
- Modal body-scroll lock works on iOS
- Pull-to-refresh handled inside Capacitor
- Keyboard show/hide handled so inputs stay visible
- Haptic feedback added to key actions
- Bootstrap usage audited and removed/replaced
- Tested on a real device (iPhone and Android), not just the browser
Depends on
https://github.com/need4deed-org/fe/issues/649 (Capacitor setup must be done first to test on-device)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.