Mobile Web
Opbox is a fully responsive single-page app. There are no separate mobile URLs to remember and no app-store binary to install - the same workspace you use on desktop adapts automatically when you open it on a phone or tablet.
Breakpoints
| Viewport width | Layout |
|---|---|
| < 768px | Mobile. Bottom nav, drawers, card lists. |
| 768px - 1023px | Tablet. Hybrid layout - sidebars condensed, AG Grid retained. |
| 1024px+ | Desktop. Full sidebar, full grid, side-by-side detail panels. |
The mobile breakpoint matches Tailwind’s md so anything under 768px sees the mobile shell.
Navigation
On mobile, the desktop sidebar is replaced by a 5-tab bottom navigation bar:
| Tab | Opens |
|---|---|
| Home | Workspace dashboard |
| Tables | Tables index |
| Matters | Matters list |
| AI | Spotlight chat (full-screen) |
| More | Drawer with Documents, Forms, Submissions, Files, Automations, Settings, Notifications, plus addon-gated entries (CSP, ESOP, Equity, Performing Arts Visa) |
Page-level sidebars (the documents folder tree, the matters template list, the form list) move into a floating action button (FAB) that opens a bottom-sheet drawer when tapped.
Per-feature behaviour
- Tables: AG Grid is replaced by a swipeable card list (
MobileTableList). Each row is a card with the primary fields shown prominently; tap to open the record detail view. - Record detail: The 360px sidebar collapses into a FAB that opens a drawer with linked records, activity, and files. The main detail panel takes the full screen width.
- Matters: The matters list switches to cards. Inside a matter, steps stack vertically. The matter sidebar opens via FAB.
- Documents: Editor takes the full screen. The folder tree opens via FAB.
- Dashboards: Widgets reflow to single-column. The dashboard list sidebar opens via FAB.
- Spotlight (AI chat): Opens as a full-screen drawer instead of the centered Cmd+K dialog. AI responses stream the same way.
- Notifications: The bell icon opens a full-screen sheet (instead of the desktop popover).
Deep links and back navigation
Every navigation push tracks a stack so the back button works correctly through navigated cards, drawers, and detail screens. Edge-swipe-back is wired up via the same stack. Direct deep links (e.g. opening a record URL from a notification or email) skip the stack and behave the same as on desktop.
What’s the same as desktop
- Full feature parity for read-and-edit workflows: matters, tables, forms, documents, dashboards, automations, AI chat.
- All authentication paths (SSO, 2FA, invite tokens) work without changes.
- Live UI refresh when the AI completes a write.
- Theme support - all 6 themes plus your custom theme apply identically.
What’s intentionally different
- AG Grid is desktop-only. The mobile card list trades cell-level editing for tap-to-open detail. Bulk operations move to the row context menu.
- The dashboard JSON editor and form-builder field designer are not optimised for phone-sized screens; they work but are best on tablet+.
- The PDF annotation surface is desktop-only - on mobile, you can view annotated PDFs but not author new annotations.
- Settings tabs scroll horizontally on mobile (vs. vertical sidebar on desktop).
Performance
The mobile shell (bottom nav, drawers, mobile components) is dynamically imported - desktop sessions ship zero mobile code. The first render on mobile briefly uses the desktop layout before hydrating to mobile (SSR-safe pattern); this is intentional and trades a one-time flash for a faster perceived load.