Skip to content

[MOBILE-001] Improve mobile tap targets and popover fit - #98

Open
chev0004 wants to merge 1 commit into
developfrom
fix/mobile-001
Open

[MOBILE-001] Improve mobile tap targets and popover fit#98
chev0004 wants to merge 1 commit into
developfrom
fix/mobile-001

Conversation

@chev0004

@chev0004 chev0004 commented Jul 8, 2026

Copy link
Copy Markdown
Owner

Outline

Summary

Mobile product pass at 375px across discovery, profile editor, settings, saved, and public profile. Layouts were already clean (no horizontal overflow anywhere); the fixes address the small tap targets found in the audit and the notifications popover exceeding the viewport width.


Changes & Enhancements

  • Type of Change:
    • Feature
    • Bugfix
    • Refactor
    • Chore
  • Changes:
    • (Navbar):
      • Inbox trigger hit area grows from 24x24 to 40x40 via padding with negative margin, no visual change.
      • Language switcher gains an invisible 8px hit-area extension on both sides.
      • Notifications popover is capped at the viewport width (was fixed 420px on a 375px screen).
    • (Discovery cards):
      • Card menu button gains an invisible 8px hit-area ring (26x26 visual, 42x42 touch).
      • Copy username and country/time rows grow from 16px to 32px tap height via padding with negative margin.

Page / App Changes

Affected Next.js Routes (Local):

  • /[lang] (card and navbar tap targets, inbox popover fit)
  • /[lang]/u/[id] (card tap targets)
Before (Screenshot)
After (Screenshot)

Component / Storybook Changes

Affected Storybook Components (Local):

Before (Screenshot)
After (Screenshot)

Not Doing

  • Language and tag pills stay at their designed 22 to 26px height: they sit in dense rows where invisible hit-area extensions would overlap each other.

Other (Remarks)

Audited at 375x812: no horizontal overflow on any core route, popovers fit the viewport, and the sticky save bars do not cover form content. Verified tap-target sizes and the popover fit in the browser after the fixes.


Checklists

  • Code is well-documented (comments, JSDoc, etc.).
  • Existing comments were updated as needed.
  • No out-of-scope changes are included.
  • Write TODO comments where future work is required.
  • Removed unnecessary debug code (e.g., console.log, debugger).
  • Self-reviewed and tested locally.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant