Breakpoints keep product layouts usable across screen widths.
Where layouts adapt across supported screen sizes.
Design around supported canvas ranges.
Breakpoints define how layouts adapt across screen sizes. Dew supports a limited responsive approach: product screens are optimized from 1150px upward, remain accessible below that width through horizontal scrolling, and stop stretching once the viewport becomes too wide.
Optimized from 1150px and above.
Our product is optimized for screens 1150px and above. On smaller screens, content may extend beyond the viewport, requiring horizontal scrolling.
Two breakpoint ranges are defined:
This approach ensures optimal usability on supported screen sizes while maintaining access on smaller devices.
0-1150px
Keep the product canvas intact and allow horizontal scroll.
1150px to 1920px
Fit the product workspace comfortably inside the viewport.
Beyond 1920px
Cap the product width so content does not stretch endlessly.
Below 1150px
Below 1150px, users will need to horizontally scroll to view the content. The product canvas should not collapse into unusable columns.
1150px to 1920px
This is the primary supported range for product workspaces. Layouts should fit the viewport, preserve navigation and detail panels, and keep the main content readable without horizontal scrolling.
Beyond 1920px
Beyond 1920px, cap the product canvas instead of stretching every panel. This keeps reading lengths, sidebars, and work areas comfortable on ultra-wide displays.
