Touch ergonomics: bigger canvas handles, on-screen nudge, tap targets, sheet/toast z-index #104

Closed
opened 2026-07-22 04:37:50 +00:00 by steve · 0 comments
Owner

Part of #96. Best after the editor-mode-model issue so it tunes the new surfaces.

Problem (from the audit).

  • Object resize/rotate handles are 12px (editor/shared.ts HANDLE_PX = 12) — fine for a mouse, too small for a fingertip. Plops already bump to ~44px; objects don't.
  • Fine positioning is keyboard-only — arrow-key nudge with a debounced PATCH (GardenEditorPage.tsx). No touch equivalent, so a phone user can't nudge precisely.
  • ~24px close/remove buttons across Inspector, PlopInspector, rail, SeedTray, PlantPicker.
  • Toast stack (z-[60]) renders over the open rail bottom sheet (z-30) — a real stacking conflict on mobile.
  • Category chips are ~28px and rely on horizontal scroll.

Do.

  • Scale canvas handles up on coarse pointers (or unconditionally to ~24px hit area with a smaller visual), keeping non-scaling-stroke crispness.
  • Add an on-screen nudge for a selected object/plop on touch (a small d-pad, or drag-with-snap already exists — decide and document), so precise placement doesn't require a keyboard.
  • Sweep tap targets to ≥ 44px on the primary touch controls (close buttons, chips, tray remove).
  • Fix the toast-vs-sheet layering so toasts never hide behind or cover the active sheet inappropriately (raise the sheet or offset toasts above it on mobile).

Acceptance.

  • Resize/rotate a bed with a finger without repeatedly missing the handle.
  • Nudge a selection precisely on a touch device with no keyboard.
  • No primary touch control smaller than ~44px in the editor.
  • Toasts and the mobile sheet don't obscure each other.

Scope to the editor's touch surfaces; the non-editor pages are a separate polish issue.

Part of #96. Best after the editor-mode-model issue so it tunes the new surfaces. **Problem (from the audit).** - Object **resize/rotate handles are 12px** (`editor/shared.ts` `HANDLE_PX = 12`) — fine for a mouse, too small for a fingertip. Plops already bump to ~44px; objects don't. - **Fine positioning is keyboard-only** — arrow-key nudge with a debounced PATCH (`GardenEditorPage.tsx`). No touch equivalent, so a phone user can't nudge precisely. - **~24px close/remove buttons** across Inspector, PlopInspector, rail, SeedTray, PlantPicker. - **Toast stack (`z-[60]`) renders over the open rail bottom sheet (`z-30`)** — a real stacking conflict on mobile. - Category chips are ~28px and rely on horizontal scroll. **Do.** - Scale canvas handles up on coarse pointers (or unconditionally to ~24px hit area with a smaller visual), keeping non-scaling-stroke crispness. - Add an **on-screen nudge** for a selected object/plop on touch (a small d-pad, or drag-with-snap already exists — decide and document), so precise placement doesn't require a keyboard. - Sweep tap targets to ≥ 44px on the primary touch controls (close buttons, chips, tray remove). - Fix the toast-vs-sheet layering so toasts never hide behind or cover the active sheet inappropriately (raise the sheet or offset toasts above it on mobile). **Acceptance.** - Resize/rotate a bed with a finger without repeatedly missing the handle. - Nudge a selection precisely on a touch device with no keyboard. - No primary touch control smaller than ~44px in the editor. - Toasts and the mobile sheet don't obscure each other. Scope to the editor's touch surfaces; the non-editor pages are a separate polish issue.
steve added the drawingpolish labels 2026-07-22 04:37:50 +00:00
steve closed this issue 2026-07-22 14:20:24 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: steve/pansy#104