Foundations
Layout and responsive shells
Keep one stable top header and independently scrolling work views across desktop and phone sizes.
On this page
Layout rules
| Area | Source behavior |
|---|---|
| Document | html/body height 100%; overflow hidden; no document overscroll |
| App shell | HelpdeskApp flex column with h-dvh; header shrinks independently |
| Header | 64px; three-column grid; compact logo and New label on phones |
| Queue | Centered content max-w-5xl, sticky queue/filter controls inside scrolling section |
| Thread | Centered content max-w-4xl; independent scrolling section |
| People | max-w-6xl; five-column row at lg, stacked at smaller widths |
| Settings/team/profile | Centered cards; responsive one/two-column compositions |
| Dialog | Width calc(100% - 2rem), default max-w-xl, max-height calc(100dvh - 2rem) |
| Sheet | Right-aligned, max-width 460px, full dynamic viewport height |
Breakpoint vocabulary
Tailwind sm is 640px, md 768px and lg 1024px at the audited baseline. Several components use max-sm ordering rules. The demonstrated phone is 390 × 844 CSS pixels; desktop is 1440 × 1000. These are capture sizes, not the only supported sizes.
The source uses internal scrollers. A supplemental full-content capture increases the browser viewport to the source scroller’s measured content height; it does not stretch the image or force fixed-height controls to grow. The normal viewport captures remain the evidence for actual phone behavior.
Placement rules
- Keep absolute popups attached to their relative trigger container.
- Use min-w-0 on flexible text and preserve shrink-0 on avatars/actions.
- Keep the source’s mobile stacking and hidden metadata columns intact.
- At short heights, inspect dialog containment: some tall source forms can scroll the hidden outer container and clip their header/footer.
Source references
| File | Responsibility |
|---|---|
| app/globals.css | Document scroll policy |
| components/helpdesk-app.tsx | App shell |
| components/app-header.tsx | Header grid and overlays |
| components/ui/dialog.tsx | Dialog and sheet sizes |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0