List management — 375 px, English · עברית
Frames 1a–1f at a phone width. Same components, same data, same hooks as desktop; tables become one card per row, row actions move into a sheet, dialogs become the design system's BottomSheet, and a quota-blocked button explains itself in text because a phone has no hover to show a tooltip.
en · ltr · 375 · index
Selection Lists
Reference data your organization owns.
+ New listShowing 4 of 12 · owner and last-updated move into the list's detail.
he · rtl · 375 · list detail
מדינות
countries source: en
+ הוספת ערךמציג 4 מתוך 249
en · ltr · 375 · edit value
Edit value
Countries · source locale en
sli_03h455vb4pex5vsknk084sn02q
en · ltr · 375 · reorder (touch)
Countries
Long-press a handle to lift a row, then drag — or use the buttons. Either way the drop sends the full permutation.
Saving
en · ltr · 375 · quota wall
Selection Lists
You've reached 20 of 20 lists you own (user_lists). Transfer or archive a list, or ask an org admin to raise the limit.
en · ltr · 375 · value actions
Yugoslavia archived
Hidden from every picker; stored ids still resolve.
States at 375 px
Same states as frames 1a and 1c, same copy; only the layout changes.
loading
empty
No selection lists yet
Define your first list and every app in this organization can use it.
+ New listerror
Couldn't load selection lists
Your lists are safe — nothing has been changed.
404 — list not found
Rules the implementation must keep
- At ≤ 40em (≈ 640 CSS px) the shell's side navigation collapses to the menu button (DS Drawer), and every table in this flow renders as one card per row: name first, then key, count and status. Owner and last-updated are not dropped — they live on the list's detail.
- Touch targets are at least the DS
--touch-target(44 px) — buttons, inputs, tabs, drag handles and the row-actions button. No horizontal scroll at 375 px; the tab bar may scroll sideways on its own. - Row actions move into a “More actions” sheet with exactly the desktop actions for that row — Edit / Archive for active values, Restore / Delete… for archived ones. Delete still opens the typed-confirmation dialog of frame 1d; a phone never gets a shorter path to a purge.
- Reorder works without a keyboard and without precise dragging. Long-press lifts a row (pointer drag), and a lifted row shows Up / Down / Done buttons that do what ↑ / ↓ / Space do on desktop. Each move is announced in the live region; the drop sends the full permutation; a failed save puts rows back.
- Dialogs become the DS BottomSheet (max height
--sheet-max-h) with stacked full-width actions, primary action last (nearest the thumb). Code stays locked on edit and thesli_…id is still shown. - A disabled CTA explains itself in visible text directly under the button (
aria-describedby), because a tooltip cannot be hovered on touch. Quota failing open (frame 1f) is unchanged. - RTL (
he,ar): direction comes from the locale, layout uses logical properties, keys and codes are LTR islands, and the row chevron mirrors; the drag-handle glyph does not.
Test hooks: [data-frame='15-mobile-list-management'] · [data-device='375'] · [data-panel='list-index-mobile'] · [data-panel='value-editor-mobile'] · [data-locale='he'][data-dir='rtl'] · [data-action='open-drawer'] · [data-action='new-list'] · [data-action='value-actions'] · [data-drag-handle] · [data-control='touch-reorder'] · [data-action='move-up'] · [data-action='move-down'] · [data-dialog='value'][data-presentation='bottom-sheet'] · [data-dialog='value-actions'] · [data-reason='quota'] · [data-state='loading'] · [data-state='empty'] · [data-state='error'] · [data-state='not-found'] · [data-rules='mobile-list-management']
Playwright drives the real flow at { viewport: 375×812, locale: en | he-IL } and asserts no horizontal scroll, every
interactive box ≥ 44 px tall, and that the disabled New list button has a visible aria-describedby reason.
Tokens only — no raw hex, spacing or type outside tokens.css / frame.css / mobile.css.