need4deed-org / need4deed-org/fe

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

Open
#656 0 comments 0 reactions 1 assignee View on GitHub

@Justber79 is already working on this.

Since Sep 16, 2026.

chore
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.