Mobile Interaction Prototypes

Interactive prototypes of the expected mobile behavior for each component in the migration table. Tap a card to open it in a phone frame — everything is interactive (tap triggers, drag sheets down to dismiss). Use the theme and light/dark controls in the sidebar to sanity-check across themes.

Blocks migration13 components

Bottom Sheet

The base primitive for mobile overlays.

Drawer

Edge panel.

Dialog

Bottom sheet. Alert dialogs still use dialogs.

Layout / LayoutPanel

Server-safe hideBelow / showBelow.

Selector

Bottom sheet, height hugs the option list; long lists open at a medium detent and drag up to full.

MultiSelector

Bottom sheet with checkboxes; hug/capped for short lists, opt-in medium↔full detents for long ones.

Typeahead

Bottom sheet, pinned tall (search results stream in — stable height avoids resize-on-keystroke).

PowerSearch

Bottom sheet, pinned tall (search results are unstable).

DateInput

Bottom sheet, height hugs the calendar grid.

DateTimeInput

Bottom sheet with a calendar grid + time list; opens at a medium detent and drags up to full.

DateRangeInput

Bottom sheet with a vertical month scroll (Airbnb / Material mobile pattern).

FormLayout

Single-column, labels above, below breakpoint.

Tokenizer

H-scroll tag row + pinned-tall sheet for suggestions (search-driven).

Enhancement10 components

Popover

Sheet fallback when content is large.

DropdownMenu

Anchored popover → action sheet.

MoreMenu

Action sheet.

ContextMenu

Action sheet (long-press already supported).

HoverCard

Explicit touch trigger (today unguarded).

InfoTip

Tap-to-open, same contract as Tooltip.

Pagination

Compact / overflow behavior on narrow screens.

Tooltip

Tap-to-toggle if no interactive content (today fully suppressed on touch).

Table

Reflow: priority columns + card-stack (not just h-scroll).

Table filter

Bottom sheet (filtering plugin).