Touch and narrow screens

Keep controls and maps one tap apart

Long configuration panels remain usable on phones through persistent workspace jumps, touch-safe controls, and tested responsive ordering.

Mobile behavior

Controls / MapA sticky jump bar moves directly between long controls and the current map. 44 pixel targetsPrimary controls meet a practical coarse-pointer touch size. 16 pixel fieldsInputs avoid unwanted mobile-browser zoom. Report orderPrintable-map controls appear before the mobile preview. No overflowRepresentative explorers and examples are checked at 390 by 844 pixels.

Copyable setup

Load the helper after the page-specific scripts. It inserts native buttons only when a supported controls-and-map layout is present and remains hidden on desktop screens.

<link rel="stylesheet" href="../styles.css">

<!-- Your map and page scripts -->
<script src="../mobile-workspace.js"></script>

Run the mobile regression suite

pnpm test:browser -- tests/browser/mobile.spec.js tests/browser/mobile-accessibility.spec.js --workers=1

The suite covers jump navigation, touch-target height, form sizing, mobile report ordering, horizontal overflow, and serious accessibility issues.