Professional compact-mode concept
Cirrus compact mode
One density control across the product
Interaction design / HTML / CSS / JavaScript
Jason Rodriguez Active
- jason@example.test
- Department
- Public Works
- Position
- Operations specialist
- Supervisor
- Alex Taylor
| Type | Cycle | Description | Amount |
|---|---|---|---|
| Direct deposit | Every payroll | Checking account | $2,480.00 |
| Federal income tax | Every payroll | Federal withholding | $412.60 |
| Social Security | Every payroll | Employee contribution | $205.84 |
| Medicare | Every payroll | Employee contribution | $48.14 |
| Medical insurance | Monthly | Health plan | $126.00 |
| Dental insurance | Monthly | Dental plan | $18.50 |
| Vision insurance | Monthly | Vision plan | $8.25 |
| Retirement | Every payroll | Employee contribution | $198.00 |
| Employer retirement | Every payroll | Employer contribution | $99.00 |
| Health savings | Every payroll | HSA contribution | $50.00 |
| Life insurance | Monthly | Supplemental coverage | $12.00 |
| Transit benefit | Monthly | Commuter benefit | $35.00 |
| Union dues | Monthly | Member contribution | $24.00 |
| Savings | Every payroll | Savings account | $100.00 |
| Additional withholding | Every payroll | Voluntary withholding | $25.00 |
Cirrus compact mode
More records. Same workspace.
One density setting adjusts spacing across the toolbar, navigation, panels, and table. The demo keeps the same 15 records and body text size.
Production feature, recreated here
Compact mode shipped in production. This portfolio interpretation uses synthetic data; the visible-row counts describe this demo.
Implementation details
A shared density state changes spacing across the interface. ResizeObserver measures fully visible rows after the layout settles, including when the viewport changes.
The viewport stays the same height in both modes. On small screens, the table prioritizes deduction type and amount. Controls support keyboard activation and respect reduced motion.