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.

Pull requests
Palette options: dashboard and work orders
A. Ink on canvas (chosen)
Warm canvas shell, near-white sheet, near-black buttons. Rust only on the logo.
A. Ink on canvas (chosen)A. Ink on canvas (chosen) work orders
B. Sage
Stone greys, deep green buttons. The green collides with the green “done” badges.
B. SageB. Sage work orders
C. Harbor
Cool slate, blue-teal buttons. The teal collides with the blue “scheduled” badges.
C. HarborC. Harbor work orders
Side nav and dark mode
Collapsed to an icon rail (choice kept across reloads)
Collapsed to an icon rail (choice kept across reloads)
Rail tooltips and the unread dot (live)
Rail tooltips and the unread dot (live)
Phone: the menu is a drawer that closes when you pick a page (live)
Phone: the menu is a drawer that closes when you pick a page (live)
The chosen palette in dark mode (live)
The chosen palette in dark mode (live)
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.

PagePage scroll beforeBefore 1440Before 390Page scroll afterAfter 1440After 390Live before 1440Live before 390Live after 1440Live after 390
dashboardyes03no002300
messengerno00no000000
calendaryes04no000400
leadsno01no000100
showingsyes04no000400
applicationsno01no000100
availabilityno11no001100
propertiesno01no000100
unitsyes05no000500
householdsno01no000100
leasesno01no000100
work-ordersno01no001100
vendorsno01no000100
ledgerno01no000100
moneyyes02no000200
arrearsno11no001100
renewalsno01no000100
activityno00no000100
teamno11no001100
settings/apino01no000100
settings/webhooksno00no000000
settings/chaosno00no000000
settings/loginno01no000100
settings/simulationno01no001500
leads-detailno00no000000
applications-detailno01no000100
properties-detailno01no000100
units-detailno00no000000
households-detailno01no000100
work-orders-detailno00no000000
vendors-detailno00no000000
messenger-detailno00no000000
renewals-detailno00no000000
Total3360074100
Key pages, before and after
Dashboard: the “Today” item ran outside the window on a phone (desktop)
Beforebefore dashboard
Afterafter dashboard
Livelive dashboard
Dashboard: the “Today” item ran outside the window on a phone (phone)
Beforebefore dashboard
Afterafter dashboard
Livelive dashboard
Work orders: 11-column table (desktop)
Beforebefore work-orders
Afterafter work-orders
Livelive work-orders
Work orders: 11-column table (phone)
Beforebefore work-orders
Afterafter work-orders
Livelive work-orders
Calendar: the week scrolled sideways on a phone (desktop)
Beforebefore calendar
Afterafter calendar
Livelive calendar
Calendar: the week scrolled sideways on a phone (phone)
Beforebefore calendar
Afterafter calendar
Livelive calendar
Units: the filter row pushed the page wide (desktop)
Beforebefore units
Afterafter units
Livelive units
Units: the filter row pushed the page wide (phone)
Beforebefore units
Afterafter units
Livelive units
Teammates: scrolled sideways even on desktop (desktop)
Beforebefore team
Afterafter team
Livelive team
Teammates: scrolled sideways even on desktop (phone)
Beforebefore team
Afterafter team
Livelive team
Availability: scrolled sideways even on desktop (desktop)
Beforebefore availability
Afterafter availability
Livelive availability
Availability: scrolled sideways even on desktop (phone)
Beforebefore availability
Afterafter availability
Livelive availability
Work order detail (desktop)
Beforebefore work-orders-detail
Afterafter work-orders-detail
Livelive work-orders-detail
Work order detail (phone)
Beforebefore work-orders-detail
Afterafter work-orders-detail
Livelive work-orders-detail
Every page, before and after
dashboard
dashboard · desktop 1440
Beforebefore dashboard
Afterafter dashboard
Livelive dashboard
dashboard · phone 390
Beforebefore dashboard
Afterafter dashboard
Livelive dashboard
messenger
messenger · desktop 1440
Beforebefore messenger
Afterafter messenger
Livelive messenger
messenger · phone 390
Beforebefore messenger
Afterafter messenger
Livelive messenger
calendar
calendar · desktop 1440
Beforebefore calendar
Afterafter calendar
Livelive calendar
calendar · phone 390
Beforebefore calendar
Afterafter calendar
Livelive calendar
leads
leads · desktop 1440
Beforebefore leads
Afterafter leads
Livelive leads
leads · phone 390
Beforebefore leads
Afterafter leads
Livelive leads
showings
showings · desktop 1440
Beforebefore showings
Afterafter showings
Livelive showings
showings · phone 390
Beforebefore showings
Afterafter showings
Livelive showings
applications
applications · desktop 1440
Beforebefore applications
Afterafter applications
Livelive applications
applications · phone 390
Beforebefore applications
Afterafter applications
Livelive applications
availability
availability · desktop 1440
Beforebefore availability
Afterafter availability
Livelive availability
availability · phone 390
Beforebefore availability
Afterafter availability
Livelive availability
properties
properties · desktop 1440
Beforebefore properties
Afterafter properties
Livelive properties
properties · phone 390
Beforebefore properties
Afterafter properties
Livelive properties
units
units · desktop 1440
Beforebefore units
Afterafter units
Livelive units
units · phone 390
Beforebefore units
Afterafter units
Livelive units
households
households · desktop 1440
Beforebefore households
Afterafter households
Livelive households
households · phone 390
Beforebefore households
Afterafter households
Livelive households
leases
leases · desktop 1440
Beforebefore leases
Afterafter leases
Livelive leases
leases · phone 390
Beforebefore leases
Afterafter leases
Livelive leases
work-orders
work-orders · desktop 1440
Beforebefore work-orders
Afterafter work-orders
Livelive work-orders
work-orders · phone 390
Beforebefore work-orders
Afterafter work-orders
Livelive work-orders
vendors
vendors · desktop 1440
Beforebefore vendors
Afterafter vendors
Livelive vendors
vendors · phone 390
Beforebefore vendors
Afterafter vendors
Livelive vendors
ledger
ledger · desktop 1440
Beforebefore ledger
Afterafter ledger
Livelive ledger
ledger · phone 390
Beforebefore ledger
Afterafter ledger
Livelive ledger
money
money · desktop 1440
Beforebefore money
Afterafter money
Livelive money
money · phone 390
Beforebefore money
Afterafter money
Livelive money
arrears
arrears · desktop 1440
Beforebefore arrears
Afterafter arrears
Livelive arrears
arrears · phone 390
Beforebefore arrears
Afterafter arrears
Livelive arrears
renewals
renewals · desktop 1440
Beforebefore renewals
Afterafter renewals
Livelive renewals
renewals · phone 390
Beforebefore renewals
Afterafter renewals
Livelive renewals
activity
activity · desktop 1440
Beforebefore activity
Afterafter activity
Livelive activity
activity · phone 390
Beforebefore activity
Afterafter activity
Livelive activity
team
team · desktop 1440
Beforebefore team
Afterafter team
Livelive team
team · phone 390
Beforebefore team
Afterafter team
Livelive team
settings/api
settings/api · desktop 1440
Beforebefore settings/api
Afterafter settings/api
Livelive settings/api
settings/api · phone 390
Beforebefore settings/api
Afterafter settings/api
Livelive settings/api
settings/webhooks
settings/webhooks · desktop 1440
Beforebefore settings/webhooks
Afterafter settings/webhooks
Livelive settings/webhooks
settings/webhooks · phone 390
Beforebefore settings/webhooks
Afterafter settings/webhooks
Livelive settings/webhooks
settings/chaos
settings/chaos · desktop 1440
Beforebefore settings/chaos
Afterafter settings/chaos
Livelive settings/chaos
settings/chaos · phone 390
Beforebefore settings/chaos
Afterafter settings/chaos
Livelive settings/chaos
settings/login
settings/login · desktop 1440
Beforebefore settings/login
Afterafter settings/login
Livelive settings/login
settings/login · phone 390
Beforebefore settings/login
Afterafter settings/login
Livelive settings/login
settings/simulation
settings/simulation · desktop 1440
Beforebefore settings/simulation
Afterafter settings/simulation
Livelive settings/simulation
settings/simulation · phone 390
Beforebefore settings/simulation
Afterafter settings/simulation
Livelive settings/simulation
leads-detail
leads-detail · desktop 1440
Beforebefore leads-detail
Afterafter leads-detail
Livelive leads-detail
leads-detail · phone 390
Beforebefore leads-detail
Afterafter leads-detail
Livelive leads-detail
applications-detail
applications-detail · desktop 1440
Beforebefore applications-detail
Afterafter applications-detail
Livelive applications-detail
applications-detail · phone 390
Beforebefore applications-detail
Afterafter applications-detail
Livelive applications-detail
properties-detail
properties-detail · desktop 1440
Beforebefore properties-detail
Afterafter properties-detail
Livelive properties-detail
properties-detail · phone 390
Beforebefore properties-detail
Afterafter properties-detail
Livelive properties-detail
units-detail
units-detail · desktop 1440
Beforebefore units-detail
Afterafter units-detail
Livelive units-detail
units-detail · phone 390
Beforebefore units-detail
Afterafter units-detail
Livelive units-detail
households-detail
households-detail · desktop 1440
Beforebefore households-detail
Afterafter households-detail
Livelive households-detail
households-detail · phone 390
Beforebefore households-detail
Afterafter households-detail
Livelive households-detail
work-orders-detail
work-orders-detail · desktop 1440
Beforebefore work-orders-detail
Afterafter work-orders-detail
Livelive work-orders-detail
work-orders-detail · phone 390
Beforebefore work-orders-detail
Afterafter work-orders-detail
Livelive work-orders-detail
vendors-detail
vendors-detail · desktop 1440
Beforebefore vendors-detail
Afterafter vendors-detail
Livelive vendors-detail
vendors-detail · phone 390
Beforebefore vendors-detail
Afterafter vendors-detail
Livelive vendors-detail
messenger-detail
messenger-detail · desktop 1440
Beforebefore messenger-detail
Afterafter messenger-detail
Livelive messenger-detail
messenger-detail · phone 390
Beforebefore messenger-detail
Afterafter messenger-detail
Livelive messenger-detail
renewals-detail
renewals-detail · desktop 1440
Beforebefore renewals-detail
Afterafter renewals-detail
Livelive renewals-detail
renewals-detail · phone 390
Beforebefore renewals-detail
Afterafter renewals-detail
Livelive renewals-detail
PropFlow Docs