Dashboard Layout
SetGet dashboards use a flexible grid system that lets you arrange widgets exactly where you want them. Whether you are building a wall-mounted standup display or a personal planning screen, the layout system adapts to your needs.
Grid system
The dashboard canvas is divided into a 12-column grid. Widgets snap to grid cells, ensuring consistent alignment across the dashboard.
Grid dimensions
| Property | Value |
|---|---|
| Columns | 12 |
| Row height | 80px (auto-expands for content) |
| Gap | 16px between widgets |
| Padding | 24px around the dashboard edges |
Widget size units
Widget sizes are expressed in grid units (columns x rows):
| Size label | Grid units | Typical use |
|---|---|---|
| Small | 1x1 (3 columns, 1 row) | Single metric, Quick Actions |
| Medium | 2x2 (6 columns, 2 rows) | Charts, lists, tables |
| Wide | 2x1 (6 columns, 1 row) | Progress bars, risk cards |
| Large | 3x2 (9 columns, 2 rows) | Detailed charts with legends |
| Full width | 4x1 (12 columns, 1 row) | Stats bars, banners, calendar strips |
| Full width tall | 4x2 (12 columns, 2 rows) | Heatmaps, large tables |
TIP
Not every widget needs to be large. A dashboard with a mix of small metric widgets and larger charts is easier to scan than one filled with oversized charts.
Entering edit mode
To modify the layout:
- Open the dashboard.
- Click the Edit button in the top-right toolbar.
- The dashboard enters edit mode. You will see:
- Blue outlines around each widget.
- Resize handles on the bottom-right corner of each widget.
- A drag handle (grip icon) on the widget header.
- An Add Widget button in the toolbar.
Click Done when you are finished editing.
Drag-and-drop repositioning
Moving a widget
- Enter edit mode.
- Click and hold the drag handle (grip icon) on the widget header.
- Drag the widget to the desired position on the grid.
- A blue placeholder shows where the widget will land.
- Release the mouse button to drop the widget.
Reflow behavior
When you drop a widget, other widgets automatically reflow to make room:
| Scenario | Behavior |
|---|---|
| Drop on empty space | Widget occupies the space directly |
| Drop on an occupied cell | Existing widgets shift downward |
| Drop between two widgets | Widgets below the drop target shift down |
| Drop at the end | Widget appends to the bottom of the grid |
WARNING
Reflowing only shifts widgets downward, never upward. If you want a widget to appear higher on the dashboard, drag it above the widgets that should appear below it.
Resizing widgets
Drag-to-resize
- Enter edit mode.
- Hover over the bottom-right corner of a widget. The cursor changes to a resize handle.
- Click and drag to expand or shrink the widget.
- The widget snaps to the nearest grid cell boundary.
- Release to confirm the new size.
Minimum and maximum sizes
| Constraint | Value |
|---|---|
| Minimum width | 3 columns (25% of the grid) |
| Minimum height | 1 row |
| Maximum width | 12 columns (full width) |
| Maximum height | 6 rows |
Some widgets enforce larger minimums based on their content. For example, the Activity Heatmap requires at least 6 columns and 2 rows to render legibly.
Preset sizes
Right-click a widget in edit mode to access preset size options:
| Option | Result |
|---|---|
| Small | 3 columns, 1 row |
| Medium | 6 columns, 2 rows |
| Large | 9 columns, 2 rows |
| Full width | 12 columns, current height |
| Reset to default | Widget's default size for its type |
Hiding and showing widgets
Hiding a widget
You can hide a widget without deleting it. Hidden widgets retain their configuration and data.
- Enter edit mode.
- Click the ... menu on the widget header.
- Select Hide Widget.
- The widget disappears from the dashboard but remains in the hidden widgets list.
Showing a hidden widget
- Enter edit mode.
- Click Add Widget in the toolbar.
- Switch to the Hidden tab.
- Click Show next to the widget you want to restore.
- The widget reappears at the bottom of the dashboard.
TIP
Hiding is useful when you want to temporarily declutter a dashboard for a presentation without losing your widget configurations.
Full-screen widget view
Any widget can be expanded to fill the entire browser viewport:
- Hover over the widget in view mode (not edit mode).
- Click the expand icon (arrows pointing outward) in the top-right corner of the widget.
- The widget fills the screen with a dark overlay behind it.
- Interact with the widget normally (hover for tooltips, click for drill-downs).
- Press Escape or click the close button to return to the normal dashboard view.
Full-screen mode is particularly useful for:
| Widget type | Full-screen benefit |
|---|---|
| Activity Heatmap | See all hour-day cells without squinting |
| Issues Due Soon | Scroll through a long list |
| Project Health Matrix | View all projects without truncation |
| Custom Query Chart | Examine chart details with large labels |
Reset layout
If the layout becomes disorganized, you can reset it to the default arrangement:
- Enter edit mode.
- Click the ... menu in the dashboard toolbar.
- Select Reset Layout.
- Confirm the action.
The reset operation:
| What it does | What it preserves |
|---|---|
| Returns all widgets to their default positions | Widget configurations and filters |
| Returns all widgets to their default sizes | Hidden/shown state |
| Arranges widgets in their catalogue order | Dashboard name and sharing settings |
WARNING
Reset layout cannot be undone. If you have a carefully arranged layout, consider duplicating the dashboard before resetting.
Responsive behavior
SetGet dashboards adapt to different screen sizes using responsive breakpoints:
Breakpoints
| Breakpoint | Screen width | Grid columns | Behavior |
|---|---|---|---|
| Desktop (large) | 1440px+ | 12 | Full grid, all widgets at configured sizes |
| Desktop (standard) | 1024px - 1439px | 12 | Full grid, slight compression |
| Tablet | 768px - 1023px | 6 | Widgets that span more than 6 columns wrap to full width |
| Mobile | Below 768px | 1 | All widgets stack vertically at full width |
How widgets adapt
| Widget size (desktop) | Tablet | Mobile |
|---|---|---|
| 3 columns (small) | 3 columns | Full width |
| 6 columns (medium) | 6 columns | Full width |
| 9 columns (large) | Full width (6 columns) | Full width |
| 12 columns (full) | Full width (6 columns) | Full width |
Content adaptation
Some widgets adjust their internal rendering at smaller breakpoints:
| Widget | Desktop | Mobile |
|---|---|---|
| Activity Heatmap | Full 7x24 grid | Collapsed to 7x6 (4-hour blocks) |
| Deadline Calendar Strip | 14 days | 7 days |
| Team Workload | Horizontal bars | Vertical compact list |
| Project Health Matrix | Full table | Card layout |
Layout persistence
Dashboard layouts are saved automatically. Every change you make in edit mode (position, size, visibility) is persisted to the database when you click Done.
| Event | Layout behavior |
|---|---|
| Click Done | Layout is saved |
| Close browser mid-edit | Unsaved changes are lost |
| Another user edits a shared dashboard | Your view refreshes on next load |
| Duplicate a dashboard | Layout is copied exactly |
Keyboard shortcuts for layout editing
| Shortcut | Action |
|---|---|
E | Toggle edit mode |
Escape | Exit edit mode (same as clicking Done) |
Delete | Remove selected widget (in edit mode) |
Arrow keys | Nudge selected widget by one grid cell |
Shift + Arrow keys | Resize selected widget by one grid cell |
F | Toggle full-screen on hovered widget (in view mode) |
Best practices
- Group related widgets together. Place the Overview Stats Bar at the top, charts in the middle, and lists at the bottom.
- Use full-width widgets sparingly. They dominate the view. Reserve full width for the Welcome Banner, Stats Bar, and Calendar Strip.
- Test on the target display. If the dashboard will be shown on a wall monitor, check the layout at that resolution before presenting.
- Keep edit sessions short. Make your changes and click Done promptly to avoid losing work if the browser closes unexpectedly.
- Use hide instead of delete. If you might want a widget back later, hide it rather than removing it permanently.