UBO + Syncfusion Responsive Behavior
This page summarizes responsive breakpoints and observed component behavior from the current generated Syncfusion Tailwind compatibility stylesheet.
Source snapshot:
packages/tailwind-config/compatibility/tailwind.css.
Breakpoint Inventory (Observed)
| Breakpoint pattern | Typical threshold(s) | Notes |
|---|---|---|
| Mobile-first max-width checks | 400px, 469px, 480px, 580px, 590px, 600px, 625px |
Used heavily for compact layouts and control-density adjustments. |
| Tablet boundary | 768px, 769px |
Most common split between mobile/tablet and desktop behavior. |
| Large viewport adjustments | 1024px |
Applied for larger desktop/tablet layout tuning in some components. |
| Device-width queries (legacy style) | min-device-width: 768px, max-device-width: 768px |
Present in some generated blocks alongside regular width queries. |
Component Behavior Matrix
| Component area | Breakpoint rule | Observed responsive behavior |
|---|---|---|
| Dialogs (alert/confirm/prompt) | min-width: 768px vs max-width: 768px |
Desktop fixed width (600px) switches to width: auto on smaller screens. |
| Pager | max-width: 769px |
Page size/count containers are hidden; compact nav controls are prioritized. |
| File Manager (mobile larger-icons mode) | max-width: 469px and 470px-625px |
Item width shifts from roughly 2-column to 3-column layout with fixed minimum tile width. |
| General popup/control blocks | Multiple max-width: 480px clauses |
Generated rules repeatedly collapse spacing and hide lower-priority controls for compact UIs. |
Practical Responsive Tiers For UBO Docs
To keep implementation readable, this project can treat the generated breakpoints as these practical tiers:
| Tier | Range | Design/implementation intent |
|---|---|---|
| Mobile compact | <= 480px |
Collapse secondary controls, preserve critical actions, increase clarity. |
| Mobile wide / small phablet | 481px-625px |
Allow denser tiling/lists while still optimizing for touch and narrow widths. |
| Tablet | 626px-768px |
Transition zone where many controls move from compact to regular variants. |
| Desktop | >= 769px |
Show full metadata/toolbars and fixed-width dialog patterns. |
Recommended Team Usage
- Use
768px/769pxas the primary breakpoint seam for layout decisions. - Prefer behavior notes (what changes) over only numeric breakpoints in component docs.
- When adding wrappers, test at
480px,625px,768px, and desktop widths.