Tenio app polish: before and after
Live on tenio.dev: zero overflow on every page at both widths. Desktop 1440 px and phone 390 px, signed in, synthetic data.
- No sideways scrolling: 5 pages used to scroll sideways on a phone, and 3 tables did on desktop. Now zero, at both widths. Tables turn into one card per row on a phone.
- Dashboard “Today” item stays inside its panel.
- Side nav collapses to icons and remembers it. On a phone it's a drawer.
- Palette: Ink on canvas, like the public site, with Geist type. Picked because neutral buttons leave colour for status. Sage and Harbor's button colours clashed with the status badges.
- Polish: one panel style, calmer headings, softer empty states.
Palette options: dashboard and work orders
Warm canvas shell, near-white sheet, near-black buttons. Rust only on the logo.
Stone greys, deep green buttons. The green collides with the green “done” badges.
Cool slate, blue-teal buttons. The teal collides with the blue “scheduled” badges.
Side nav and dark mode
Sideways-overflow count per page (before, after, live)
Offenders = whole-page sideways scroll, plus anything that runs past the window or scrolls sideways inside itself.
| Page | Page scroll before | Before 1440 | Before 390 | Page scroll after | After 1440 | After 390 | Live before 1440 | Live before 390 | Live after 1440 | Live after 390 |
|---|---|---|---|---|---|---|---|---|---|---|
| dashboard | yes | 0 | 3 | no | 0 | 0 | 2 | 3 | 0 | 0 |
| messenger | no | 0 | 0 | no | 0 | 0 | 0 | 0 | 0 | 0 |
| calendar | yes | 0 | 4 | no | 0 | 0 | 0 | 4 | 0 | 0 |
| leads | no | 0 | 1 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| showings | yes | 0 | 4 | no | 0 | 0 | 0 | 4 | 0 | 0 |
| applications | no | 0 | 1 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| availability | no | 1 | 1 | no | 0 | 0 | 1 | 1 | 0 | 0 |
| properties | no | 0 | 1 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| units | yes | 0 | 5 | no | 0 | 0 | 0 | 5 | 0 | 0 |
| households | no | 0 | 1 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| leases | no | 0 | 1 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| work-orders | no | 0 | 1 | no | 0 | 0 | 1 | 1 | 0 | 0 |
| vendors | no | 0 | 1 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| ledger | no | 0 | 1 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| money | yes | 0 | 2 | no | 0 | 0 | 0 | 2 | 0 | 0 |
| arrears | no | 1 | 1 | no | 0 | 0 | 1 | 1 | 0 | 0 |
| renewals | no | 0 | 1 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| activity | no | 0 | 0 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| team | no | 1 | 1 | no | 0 | 0 | 1 | 1 | 0 | 0 |
| settings/api | no | 0 | 1 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| settings/webhooks | no | 0 | 0 | no | 0 | 0 | 0 | 0 | 0 | 0 |
| settings/chaos | no | 0 | 0 | no | 0 | 0 | 0 | 0 | 0 | 0 |
| settings/login | no | 0 | 1 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| settings/simulation | no | 0 | 1 | no | 0 | 0 | 1 | 5 | 0 | 0 |
| leads-detail | no | 0 | 0 | no | 0 | 0 | 0 | 0 | 0 | 0 |
| applications-detail | no | 0 | 1 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| properties-detail | no | 0 | 1 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| units-detail | no | 0 | 0 | no | 0 | 0 | 0 | 0 | 0 | 0 |
| households-detail | no | 0 | 1 | no | 0 | 0 | 0 | 1 | 0 | 0 |
| work-orders-detail | no | 0 | 0 | no | 0 | 0 | 0 | 0 | 0 | 0 |
| vendors-detail | no | 0 | 0 | no | 0 | 0 | 0 | 0 | 0 | 0 |
| messenger-detail | no | 0 | 0 | no | 0 | 0 | 0 | 0 | 0 | 0 |
| renewals-detail | no | 0 | 0 | no | 0 | 0 | 0 | 0 | 0 | 0 |
| Total | 3 | 36 | 0 | 0 | 7 | 41 | 0 | 0 |
Key pages, before and after
Before
After
Live
Before
After
Live
Before
After
Live
Before
After
Live
Before
After
Live
Before
After
Live
Before
After
Live
Before
After
Live
Before
After
Live
Before
After
Live
Before
After
Live
Before
After
Live
Before
After
Live
Before
After
Live
Every page, before and after
dashboard
Before
After
Live
Before
After
Live
messenger
Before
After
Live
Before
After
Live
calendar
Before
After
Live
Before
After
Live
leads
Before
After
Live
Before
After
Live
showings
Before
After
Live
Before
After
Live
applications
Before
After
Live
Before
After
Live
availability
Before
After
Live
Before
After
Live
properties
Before
After
Live
Before
After
Live
units
Before
After
Live
Before
After
Live
households
Before
After
Live
Before
After
Live
leases
Before
After
Live
Before
After
Live
work-orders
Before
After
Live
Before
After
Live
vendors
Before
After
Live
Before
After
Live
ledger
Before
After
Live
Before
After
Live
money
Before
After
Live
Before
After
Live
arrears
Before
After
Live
Before
After
Live
renewals
Before
After
Live
Before
After
Live
activity
Before
After
Live
Before
After
Live
team
Before
After
Live
Before
After
Live
settings/api
Before
After
Live
Before
After
Live
settings/webhooks
Before
After
Live
Before
After
Live
settings/chaos
Before
After
Live
Before
After
Live
settings/login
Before
After
Live
Before
After
Live
settings/simulation
Before
After
Live
Before
After
Live
leads-detail
Before
After
Live
Before
After
Live
applications-detail
Before
After
Live
Before
After
Live
properties-detail
Before
After
Live
Before
After
Live
units-detail
Before
After
Live
Before
After
Live
households-detail
Before
After
Live
Before
After
Live
work-orders-detail
Before
After
Live
Before
After
Live
vendors-detail
Before
After
Live
Before
After
Live
messenger-detail
Before
After
Live
Before
After
Live
renewals-detail
Before
After
Live
Before
After
Live