Skip to content

Fix the three remaining sub-16px inputs, then drop user-scalable=no / maximum-scale=1 from the viewport meta (a11y) #901

Description

@tiero

From the mobile-feel audit. The main input stack is already zoom-safe (.input is 1rem, swap search fields are explicit 16px, and tokens.css:151-152 even documents the 16px-inputs intent). But the app still ships maximum-scale=1.0, user-scalable=no (index.html:7-8) as a crutch, and that has two costs:

  • Accessibility: Android Chrome honors both directives, so pinch-zoom is genuinely blocked for low-vision users (WCAG 1.4.4).
  • It doesn't even cover everything: iOS Chrome/Firefox and several embedded WKWebViews ignore maximum-scale, so the sub-16px inputs below already auto-zoom there today.

The three live sub-16px controls

  1. InputNsec bare inputsrc/components/InputNsec.tsx:15 renders a raw <input> with no class and no font-size (live via Init/Restore.tsx:153). No CSS rule sizes bare inputs, so it falls to the sub-16px browser default. Fix: give it the shared .input class like every other Input* component.
  2. Contracts search input (devMode-gated)src/screens/Settings/Contracts.tsx:344 hardcodes fontSize: 14 inline. Fix: 16 / .input.
  3. Solvers JSON editor textareasrc/screens/Settings/Solvers.tsx:96 hardcodes fontSize: '14px' (applied to the textarea at line 105; the screen is live and ungated). Fix: '16px' — monospace at 16px is still compact, rows={21} unaffected.

Then relax the viewport meta

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

Double-tap zoom stays suppressed by body { touch-action: manipulation } (src/index.css:132); the only behavior change is restoring pinch-zoom on Android — an accessibility win.

Latent (dead-code) offenders, fix-on-adoption

The unused shadcn primitives ship sub-16px on focusable elements: ui/native-select.tsx:20 (text-sm on a native <select> — iOS zooms on select focus too), ui/command.tsx:58-61 (text-sm on the real cmdk input), and md:text-sm drops ui/input.tsx:12 / ui/textarea.tsx:10 to 14px on iPad-width viewports (iPad Safari also auto-zooms). Change to text-base on the focusable elements if these are ever adopted.

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions