Width rules · ClickPay

What gives up width, and in what order

A 42-column table cannot fit a 13-inch screen, so the rule is not “shrink everything” — it is to decide in advance which part of the row is never allowed to leave. Identity stays put; the bands scroll past it.

1728 and up 16-inch, desktop

Everything visible. Every derived column width fits in 1,484px, so no table scrolls. 27 rows · no horizontal scroll

1440 and 1280 14 and 13-inch

Identity freezes at the violet edge. Risk, Decision and Position scroll behind it. search field 300px · status becomes dots

1024 tablet, split screen

The context column collapses to a flyout off the rail. Saved views move into the filter bar. rail stays · 188px reclaimed

Below 900 phone

The table stops being a table. One card per product, carrying only the identity and the decision. read and approve, not edit

The order things give up width

1Header search field560px → 300px → icon only

2Status linelabelled chips → coloured dots

3Marketplace tabs8 shown → 5 plus an overflow count

4Table columnsscroll horizontally behind frozen Identity

5Context column188px list → flyout from the rail

6The table itselfrows → cards, below 900

Row height never changes. 26px is the density the whole design is built on, and shrinking it further would cross the line where a row stops being clickable.

What stays frozen, and why those three Checkbox, UID and product name — 312px. They are what you need to know which row you are looking at once the numbers have scrolled away. Freezing the Risk band instead would look useful and be useless: a cover figure with no product beside it answers nothing.

A visible position bar, not a fading scrollbar macOS hides scrollbars until you scroll, which is how people miss that there are three more bands. The bar under the table is always drawn, and the filter row says how many bands are off-screen.

Worth testing before building Frozen columns plus a scrolling remainder is the one part of this design that is genuinely fiddly to build — two synchronised scroll areas, matched row heights, a shadow that only appears once scrolled. Worth a throwaway prototype on the real Restock data before committing the pattern to every table.

Before any of that: the 188px the reader controls

Every rule above is about what the design gives up. This one is about what the reader can take back — and on a 1440 board it is worth more than any of them, because 188px is exactly the difference between a table that scrolls and one that does not.

Drag it

148 – 320px The right edge is a resize handle. Narrow enough to be a list of initials, wide enough for the longest sub-tab name at full size.

remembered per person Not per screen. A navigation column that changes width as you move between screens is worse than no setting at all.

Fold it

to the rail The chevron in the heading collapses it to the 56px icon rail. The content area takes the whole 188px immediately.

what that buys On the 1440 board it is the difference between freezing Identity and scrolling the rest, and showing every band at once.

Hover to peek — and it overlays

at your width While collapsed, hovering the rail slides the column back out at exactly the width you dragged it to.

never reflows It floats above the content with a shadow. If it pushed the table, the row under the cursor would slide out from under the cursor every time you crossed the rail — which is the entire reason this is an overlay and not a layout change.