TRZR — Resizable Columns (Asana-style drag handles)

TRZR · Black & Gold · Mockup 05 / 04+ · Resizable columns · Asana-style drag handles

TRZR·

Design Review · Desktop · v1

Empire Builders · Members

TRZR / CIRCLES / EMPIRE-BUILDERS

⌕ ⌘ K

Circle ↕

Member ↕

Cycle ↕

Payout ↕

Status ↕

Report details —

Empire Builders

USD · 250/MO · 10 CYCLES

Marcus Adebayo

Organizer

Drag · 260 → 312px

01/10

PAYS OUT · MAR 15

$2,250.00

GROSS · CYCLE 01

Paid

Citation10-K §4.2 — schedule of contributions

Empire Builders

USD · 250/MO · 10 CYCLES

Yuki Okafor

Received · cycle 02

02/10

RECEIVED · APR 15

$2,250.00

PAID · 04/15/26

Paid

NoteBanker advised to up contribution by $50

Empire Builders

USD · 250/MO · 10 CYCLES

Sofia Chen

Received · cycle 03

03/10

RECEIVED · MAY 15

$2,250.00

PAID · 05/15/26

Paid

CitationBanker brief v1.0 — adjusted schedule

Empire Builders

USD · 250/MO · 10 CYCLES

James Kowalski

Active

04/10

ACTIVE · JUN 15

$2,250.00

DUE IN 4 DAYS

Due

ActionYour turn — contribute $250.00

Empire Builders

USD · 250/MO · 10 CYCLES

Priya Raghavan

Active

05/10

QUEUED · JUL 15

$2,250.00

PROJECTED

Active

CitationSchedule §B — projected payout date

Empire Builders

USD · 250/MO · 10 CYCLES

—

Empty seat

Awaiting invite

—

UNASSIGNED

$0.00

PENDING

Open

ActionInvite a member to fill this seat

Empire Builders

USD · 250/MO · 10 CYCLES

Daniel Kawasaki

Defaulted · cycle 06

06/10

DEFAULTED · AUG 15

—FORFEIT

DISPUTE OPEN

Missed

CitationDispute tier-1 — §7.4 default rules

6 visible · 1 of 1 circles · 1 of 1 pages

Member column 260px / 200—360 Resize any column by dragging its right edge

— Layout presets

Width constraints · column registry

Column

Role

Default

Min

Max & notes

Circle

CIRCLE

Identity — the savings circle a row belongs to.

240px

180

360px · needs to fit circle name + currency sub-line.

Member

MEMBER

Person + role + recent activity.

260px

200

360px · avatar + 2 lines; can collapse to just initials + name.

Cycle

CYCLE

Which of the 10 cycles the row represents.

140px

100

220px · "04/10" + due date; rarely needs more.

Payout

PAYOUT

Gross payout at the cycle's maturity.

160px

120

240px · "$2,250.00" + status sub-line; gold for "your turn".

Status

STATUS

Paid / Due / Missed / Open pill.

160px

120

240px · "Due" pill + helper text; not resizable below pill width.

Report details

DETAILS

Citation list / report preview / banker note.

elastic · fills remaining

240

∞ · elastic filler; never has a handle.

Design Notes

The handle is invisible by default The column's right edge is the same 1px #232323 hairline that separates every region in the system. The handle sits on that hairline. The user's first signal that a column is resizable is the cursor change, not a visible affordance.
Hover treatment On hover the hairline widens to 2px and goes antique gold (--gold), with a soft 6px glow and three grip dots vertically centered. The grip dots are the only place in the system where gold is "decorative" — they are the explicit affordance.
Cursor The system cursor is col-resize across the full 6px hit area (not just the visible 1px hairline). The hit area is asymmetric: it leans 3px into the next column so users never miss it by 1px.
Active drag While dragging, a 1px gold guide line extends the full table height (with a 8px gold glow) so the user can see exactly where the column will land. A floating gold tooltip above the guide shows the live pixel width.
Min / max Enforced at the JS level on pointermove (see col-circle: 180-360px etc.). At min/max the guide turns rust (--danger) and the tooltip reads MIN or MAX. Cursor stays col-resize even at limits so users know they hit a wall, not a bug.
Double-click reset Double-clicking a handle resets that column to its default width with a 180ms ease. Same gesture as Asana / Linear / Notion.
Which columns are resizable All 5 "data" columns (Circle, Member, Cycle, Payout, Status). The last column — Report details — is the elastic filler. It absorbs free space and never gets a handle; the user reads it as "the rest of the row", not as a peer column.
Row hover vs handle hover Row hover applies a 3% gold tint to the cell. Handle hover is a separate layer: a brighter gold line + grip dots. They do not combine — handle hover wins.
What is "Citation list" here? TRZR's domain has no academic citations. The closest analog is the Report details column: banker citations (e.g. 10-K §4.2), dispute rule references (§7.4), and Banker AI brief notes. The handle treatment is identical for all data columns.
Persistence Column widths persist per-circle in localStorage. Restoring after relaunch uses the same hairline guide, briefly flashing the gold treatment as a "your columns are back" cue.

Members & Cycles