Resizable estimate list that collapses to icons

Drag the estimate list narrower to give the pricing pane more room; below 300px the header buttons drop their words and keep their icons.

What it is

A persisted width for the left list, clamped between 200 and 480px, with a measured threshold at which the header collapses to icons rather than clipping its buttons.

Also called: drag the list narrower · collapse estimate list · hamburger menu

See it
Resizable estimate list that collapses to icons
New lead 2
Marlin Hoover
$54k
Delia Yoder
$31k
Contacted 2
Sutter Kline
$52k
Ronan Petsch
$67k
Ivy Brubaker
$41k
Estimate 4
Ivy Brubaker
$40k
Gideon Alt
$59k
Sold 3
Marlin Hoover
$49k
Delia Yoder
$69k
Sutter Kline
$51k
Side-by-side of the list header at 340px (labelled buttons) and at 260px (icon-only hamburger), rendered by useListWidth.ts + EstimatesView's header. Sample data — no customer information appears here.
How it works
  1. 1Drag the divider; the width is clamped and stored in localStorage.
  2. 2Below EST_LIST_LABELS_MIN (300px) the header keeps every icon and drops the labels.
  3. 3Drag it wide again and the words come back.
Why we built it

Dragging the estimate list narrower to see more of the pricing pane used to cut the Manage Estimate button in half, so the control a builder needed most disappeared exactly when they were making room to work. Below 300px the header buttons drop their words and keep their icons instead of being clipped. The threshold is a measurement rather than a guess: at 280px the row still fits a timestamp and three labelled buttons with a little slack.

The problem
  • Header controls clipping instead of collapsing when the list is narrowed
Sound familiar?
What you get
Give the pricing pane the space it needs without losing any control

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →