← Gallery index

Phone chrome — tab bar · 60px rows · sheet · full-screen form

Oracle: Gaps 9-11 canvas, artboards 10A/10C/10D (LOCKED); tab bar is user-personalized (G10-2)

List (10A) — tab bar + 60px rows

Bottom glass tab bar: 4 user-picked modules + More, 44px+ targets, home-indicator safe area. Tables collapse to 60px rows — name + ID, meta below, status right, chevron. Filters stay chips.

9:41
Organizations

Detail (10B) — same 1A anatomy, stacked

Back header, title block, scrolling tab strip with counts, definition rows full-width. One module on screen; the tab bar stays.

9:41
Bayside Schools
Bayside SchoolsActive
ORG-0198 · School district
OverviewSites4Contacts12Jobs3
Address
4180 Bayside Pkwy, Norfolk, VA 23518
Phone
(757) 555-0144
Primary contact
Dana Whitfield · Facilities director
Requirements
Badging required · 2-week roof-access notice

Tab bar edit mode (10E) — long-press → jiggle → drag (G10-2)

The user picks which modules ride the bar and their order — home-screen convention. Drag within the bar to reorder; drag up from the grid to add; 4 slots. Static frame of the gesture.

9:41
Organizations
Edit your bar
Hold & drag to reorder · drag up from the grid to add · 4 slots
Organizations
Work
Jobs
Parts
Work
Employees
Documents
Admin

Full-screen create (10C) — safe-area CTA

Forms go full-screen; no tab bar during create — Cancel is the exit. Full-width primary above the home indicator.

9:41
New organization

Quick look (10D) — bottom sheet

The desktop drawer's phone form: grab handle, same content order, “Open full page” pinned above the safe area. Gentle spring at surface duration.

9:41
Organizations
Bayside SchoolsActive
ORG-0198 · School district
Primary contact
Dana Whitfield · Facilities director
Sites · 4
Bayside High School2 jobs
Shorewood Middle School1 job
Bayside Elementary—