Capra mobile → iPad: adaptation rules
One layout system covering every iPad. The phone UI is scaled with intent: navigation moves, columns multiply, media and lists share the width — nothing is simply stretched.
Source: apps/mobile (React Native · NativeWind)
Brand #6002FD
1 · Device matrix (points, portrait)
iPad mini 8.3" (6th/7th gen)744 × 1133
iPad 10.9" (10th gen)820 × 1180
iPad Air 11" / iPad Pro 11"834 × 1194
iPad Air 13" / iPad Pro 13"1024 × 1366
Older iPad 9.7"/10.2" (9th gen)768/810 × 1024/1080
Reference artboards are drawn at 834 × 1194. Everything is fluid between 744 and 1024, so no per-model layout is needed — only the two orientation layouts below.
2 · Navigation
Portrait → bottom tab barSame tabs as the phone, 84 pt tall, items spread to 124 pt min width, icon 24 + label 13. Keeps one-hand use on a held iPad.
Landscape → left sidebar, 260 ptLogo, organization chip (with switch), role-based nav items, user footer. Fills the width that a bottom bar would waste.
Role rules unchangedTest taker: Home · History · Notifications · Profile. Manager: Home · Sessions · Tasks · Notifications · Profile. Pending-approval tabs at 40 % opacity.
3 · Content width
Forms, legal text, OTP, static statescentered column, max 640
Forms in landscapemax 760, fields paired 2-up
Lists (Sessions · Tasks · History · Notifications)portrait: 2-col grid · landscape: master / detail (440 + rest)
Detail screensportrait: 1 col · landscape: media 55 % | info 45 %
Manager dashboard KPIs4-up (mini: 2 × 2)
Primary CTA on static screensmax 480, centered
4 · Component scale
Side gutter24 → 32 pt
Purple header title30 → 32 pt · top pad 56 → 44
Button52 → 56 pt · label 16 → 17
Input52 pt (unchanged) · radius 12
Body text16 → 17 pt where it is read
Touch targets≥ 44 pt everywhere
5 · Sheets, modals, camera
Bottom sheets → centered modalsKit type, filters, approve / reject, date pickers open as 560 pt wide centered cards on a 50 % scrim. Same content, same buttons.
Camera stays landscape-lockedViewport takes the remaining width; the control panel grows from 30 % to a fixed 400 pt so the step illustration is finally legible on a box holder.
Scanner cut-outsBarcode frame max 520 pt wide (phone: 400), face circle 380 pt (phone: 340) — larger relative to the sensor distance on a tablet.
6 · Filling the space honestly
Only data the app already has is promoted into empty areas — nothing is invented.
Test-taker Homerecent History cards below the CTA
List screens (landscape)selected item's detail in the right pane
Collection text screensreading column + kit-step context card
Tutorial screens16:9 player, caption & CTA beside it in landscape
Implementation hookuseWindowDimensions() ≥ 744 → tablet layout; app.json supportsTablet: true
How to read this canvas
Each group below has a portrait row and a landscape row at 834 × 1194 / 1194 × 834 (iPad Air / Pro 11"). Group F repeats eight key screens at iPad mini and iPad Pro 13" sizes to prove the rules hold at both ends. Camera screens are landscape-only in the app; their portrait slot shows the rotation guard a user sees when holding the iPad upright.
A · Onboarding 9B · Tabs 7C · Details 3D · Profile & legal 6E · Collection 19F · mini + 13" 16