App Studio
Breakpoints
App Studio uses three device breakpoints — Desktop, Tablet, and Mobile — to control how layouts adapt to different screen sizes.
Breakpoint Definitions
| Name | Min Width | Max Width | CSS Media Query |
|---|---|---|---|
| Desktop | 1200px | unlimited | @media (min-width: 1200px) |
| Tablet | 768px | 1199px | @media (min-width: 768px) and (max-width: 1199px) |
| Mobile | 0px | 767px | @media (max-width: 767px) |
How Breakpoints Activate
Breakpoints are evaluated at runtime by the App Studio Layout Engine based on the actual browser viewport width. When the viewport crosses a breakpoint boundary:
- The Layout Engine re-evaluates all Pane layouts and widget positions for the new breakpoint
- Widgets hidden at the new breakpoint are removed from the DOM
- Widgets with breakpoint-specific layout overrides are repositioned
- No page reload — layout changes are instant (CSS transitions for smooth resizing)
Breakpoints in Configuration
// TypeScript — BreakpointConfig
type Breakpoint = "desktop" | "tablet" | "mobile";
interface BreakpointConfig {
desktop: PaneLayoutConfig; // required — the master
tablet?: Partial<PaneLayoutConfig>; // optional override
mobile?: Partial<PaneLayoutConfig>; // optional override
}
When to Add Breakpoint Overrides
| Scenario | Action |
|---|---|
| App is admin-only, always used on Desktop | No overrides needed — Desktop layout only |
| Sidebar navigation on Desktop, bottom nav on Mobile | Add Mobile override — hide sidebar widget, show bottom nav widget |
| 3-column KPI cards on Desktop, 1-column on Mobile | Add Mobile override — change colSpan of each Metric widget to 12 |
| Complex table on Desktop, simplified list on Mobile | Add Mobile override — hide DataGrid, show simplified List widget |
| Font sizes and padding adjustments for Tablet | Add Tablet override — adjust pane padding and gap |
Breakpoints Match Tailwind
App Studio's breakpoints intentionally match Tailwind CSS's md (768px) and xl (1200px) breakpoints. If your team uses Tailwind for other projects, the mental model is consistent — Tablet roughly corresponds to md–xl and Desktop is xl+.