Responsive Behavior
The Atlas V2 layout engine auto-scales the dashboard across different screen sizes. No configuration is required; layout is recomputed for each viewport based on the widget ratios (nx/ny/nw/nh).
Prerequisite
An Atlas dashboard must be created with at least one widget placed. Otherwise responsive behavior cannot be visually verified.
No Classic Breakpoints
Atlas does not use a Bootstrap-style breakpoint system. The visual is fluid: widgets are positioned proportionally regardless of viewport. This is more predictable but less customizable.
1. Scaling Logic
baseRenderWidth is the canvas's actual current width. When the screen shrinks, baseRenderWidth shrinks and widgets scale down proportionally; the opposite when the screen grows.
| Device | What happens? |
|---|---|
| Desktop 1920×1080 | Full canvas; widgets at design size |
| Tablet 1024×768 | Canvas shrinks to ~53%; widgets scale proportionally |
| Mobile 375×667 | Canvas shrinks to ~19%; widgets appear like a single column |
2. Scroll Threshold
If content exceeds the viewport, a scrollbar appears automatically. Threshold:
Vertical scroll activates when content exceeds 50% of the viewport. Balance the widget layout to avoid overflowing the Atlas dashboard.
Scroll-free Scaling
If you size the widget count to fit on screen, no scroll appears; the entire dashboard remains in one visible area. This produces a cleaner look in embed scenarios.
3. Widget Visibility Control
| Feature | Available in V2? |
|---|---|
| Hide widget on mobile | ✗ |
| Different layout on mobile | ✗ |
| Breakpoint-based CSS | ✗ |
| Widget min/max size clamp | ✓ |
Mobile Optimization
There is no support for per-mobile widget hiding or different layouts. If widgets read poorly on mobile, the only option is to increase the font/marker size in Cartography.
4. Testing
You can test the dashboard at different screen sizes using the browser DevTools' device emulation:
| Step | Description |
|---|---|
| 1 | Open Chrome DevTools (F12) |
| 2 | Toggle the device toolbar (Ctrl+Shift+M) |
| 3 | Pick a device: iPhone 12, iPad, Surface, Custom |
| 4 | Test the dashboard in both portrait and landscape |
5. Design Tips
| Scenario | Tip |
|---|---|
| Many cards, small screen | A 2-4 widget summary dashboard + a separate detail dashboard |
| TV screen | 8-12 large widgets; 5-10s refresh interval |
| Mobile dashboard | Single column, full-width widgets (nw=1.0) |
| Embed page | No scroll; widget count that fits the viewport |
6. Print / PDF
You print the dashboard via the browser's Print → Save as PDF. Since the Atlas dashboard is responsive, it scales to the viewport in print preview. A4 landscape is recommended.
Print Preparation
Before printing:
- Make sure edit mode is off
- Make sure all widgets have data loaded
- Hide bookmarks/toolbars in the browser (F11 fullscreen)
- Enable the "Background graphics" option during print