The center column is gone: Confirm + Clear move onto the tab sub-bar
([tabs] | [Clear][Confirm] | NET value), serving both the trade and
buyback tabs, so the two panels sit side by side with just a bit of
padding between (grid.centerW 208 -> 16). The row description keeps the
smaller font, word-wraps inside the text column (wrap width stops
before the price), and the char-count budget now spans two lines so the
headless path stays bounded; rowH grows 64 -> 72 to fit both lines.
The buttons persist across tab switches (they were content before and
died with it), Confirm stays grayed while the trade is invalid, and the
stub gains setX/setY so the bar layout is testable.
description + price + stepper) instead of the 4×4 icon grid
Each stock good is now ONE WIDE ROW — the good's icon, its name + a
one-line description (the good's flavor), and the price + a −/qty/+
stepper on the right — the way the user wanted the shop list to read.
The stock (12–16 goods) outgrows the panel, so the list SCROLLS:
drag on the row area or the mouse wheel; rows outside the window are
clipped (row-based alpha clipping — this Phaser build has no
ScrollContainer/camera clip), and hidden rows' steppers are
non-interactive. The selection is data (goodId→qty), so stepping a
good works whether its row is on screen or not.
js/ui/shop/BuyList.js new — the scrollable BUY list (rows, drag +
wheel scroll, per-row steppers, flavor text)
js/ui/shop/TradeGrid.js SELL-only now — the BUY mode (steppers, stock
rendering, buy-selection data) is stripped;
one grid, one purpose
js/ui/shop/ShopView.js composes TradeGrid (SELL) + BuyList (BUY);
the BUY panel sizes itself to the SELL grid's
height (top- AND bottom-aligned)
data/shopui.json buyList row/typography knobs (name, desc,
price, row bg/border, selection accent)
dev/shop-ui.test.mjs BUY assertions rewritten for the list + a new
SCROLL section (scroll clamps, row clipping,
stepping off-screen rows)
dev/shop-shot.mjs BUY probe → the row's inline text (no tooltip)
docs/ECONOMY.md §12 the BUY bullet + mockup now describe the list
The BUY side's name + price used to live in a hover tooltip because a
grid cell is too small for text; a wide row carries them inline, so the
tooltip stays on the SELL side only. All headless suites green
(shop-ui, economy, cargo, builds, ship-behavior).
Brian Fertig