Why we rebuilt a variant grid already running in production

Merlin's admin variant grid had passed development and was running in production, until one complaint from real use got it completely rebuilt within hours.

"It's so small, hard to read, hard to type into."

That was the complaint from a client actually using Merlin in production, about the variant grid in the admin panel.

A grid that was already done

This grid is part of ProductForm.tsx, where a shop owner sets the price, cost, stock, barcode, reorder point, and supplier for each product variant combination. Color and size, for instance, become rows and columns, and each combination gets its own cell.

The structure was already complete: the cost price field had just been added, completing seven fields that had to fit in one cell — price, cost, stock, barcode, reorder point, reorder quantity, and supplier. All of it had passed development, been tested, and was running in production.

Those seven fields stacked vertically inside a single cell about 200 pixels wide.

A complaint that arrived the same day

The complaint came in while the client was actually entering their own product data, not during a demo or internal testing.

We made the call that same day: a full rebuild, not just resizing or tidying up spacing. The client pointed to the reference pattern themselves — Shopee and Tokopedia, something already familiar to sellers in Indonesia. One row per variant combination, fields laid out horizontally, not stacked vertically in a cramped cell.

What changed, what stayed the same

The layout changed completely. From a nested grid — rows for one tier, columns for the other — to a flat table, one row per variant combination. Field labels that used to be abbreviated ("Min", "Qty", "Spl") were written out in full. Input sizes that used to be small were made roomier.

What stayed the same was actually more. The feature to set price, cost, and stock for all combinations at once was kept, just with a clearer button label. One photo per color, shared across every combination with that color, was preserved exactly — the same pattern Shopee uses for showing one photo per color option. How the system matches each combination to its price data wasn't changed either, since a newly created, unsaved combination doesn't yet have its own identity number.

All the logic that made this grid work correctly from the start stayed exactly as it was. Only how it was displayed got rebuilt.

What was actually being tested

The old grid had passed development. Every field it needed was in the right place, and the structure worked as intended. Even after the rebuild, the structure itself wasn't touched at all.

What failed wasn't the structure. What failed was the moment that structure was actually used by someone who had to enter their own product data, day after day.

Something proves itself right once it's actually used — not once it's finished being designed.