Hamburger drawer navigation, responsive sidebars, touch-optimised targets for phones and tablets
On small screens (below 768px), the standard sidebar navigation collapses into a hamburger drawer. Tap the hamburger icon to slide the navigation panel in from the left. The drawer overlays the content — tap outside the drawer or on a navigation link to close it.
The Workbench uses CSS media queries and flexbox to adapt layouts across device sizes. The recipe editor — with its left panel (stages), centre panel (stage config), and right panel (live preview) — collapses vertically on small screens. Users scroll through panels rather than viewing them side-by-side.
All interactive elements (buttons, links, form controls, stage cards) meet the WCAG minimum touch target size of 44×44 CSS pixels. Long-press actions are avoided in favour of explicit buttons. Drag-and-drop recipe stage reordering uses touch-compatible gesture handling with visual feedback.
Beyond the hamburger drawer, mobile navigation includes: a bottom bar with quick actions (Recipes, Datasets, Charts, Settings), swipe-to-go-back gesture for recipe stages, and pull-to-refresh on dataset and recipe lists. These patterns follow mobile-native conventions for familiar interaction.