Context

The overlay navigation looked fine on desktop, but mobile testing revealed spacing issues and a close button that didn’t feel anchored to the expected top-right area.

Decisions

  • Use iOS-friendly tap target sizing
    Interactive controls should be at least 44×44px.
  • Anchor the close button visually and structurally
    The close control should be part of the top bar layout and not drift due to padding math.
  • Prefer predictable icons
    Avoid characters that platforms may substitute with unexpected symbols.

Implementation notes

  • Place the top bar with position: sticky or a fixed layout inside the overlay.
  • Use display: flex with a consistent gap and a stable hitbox for the close button.
  • If needed: swap the “✕” character for an inline SVG icon.

Lessons learned

Mobile polish is mostly about small details — and testing on real devices.

  • Repo: (private)