Desktop
Desktop uses a fixed sidebar, topbar, and centered page stack.
The sidebar supports pinned and hover-expanded behavior.
Mobile
At mobile breakpoints the fixed sidebar is hidden and navigation is exposed through the mobile drawer.
Two-sided authentication pages remove the card wrapper on mobile, while one-sided auth pages keep the wrapper.
Testing checklist
When updating UI, test both desktop and mobile widths.
- No text overlaps controls.
- Cards and tables stay inside the viewport.
- Mobile drawer opens and closes predictably.
- Form focus states remain visible in light and dark mode.