Half our quotation list was invisible on a phone

You are away from your desk and want to know which quotations are still waiting for an answer. You open the list on your phone. You see four columns, tidy and readable, and nothing suggests there are more. The status is not there. Neither of the two totals is there. The date is not there, and neither is any button that acts on a row.

The list looks finished, which is the problem. Status and total are the two things you open a quotation list to read, and on a phone they were simply missing, with nothing to say they existed. Nobody had to make a mistake for this to go wrong; you only had to trust what you were shown.

This was the quotation portal of JK Kitchen, a commercial kitchen fabricator. The dashboard had a second, plainer problem: its tiles took up a whole 844-pixel phone screen before any content appeared.

What was actually going on

We measured before changing anything. All six screens we checked reported zero sideways overflow on the page, both before our fix and after it. That number is why nobody ever caught this. The usual automated check asks whether the page is wider than the screen, and the page was not. The columns were being clipped inside the cards that held them, one level down from where the check looked.

So the test passed on a screen that was half empty. A tool that looks at the wrong level reports “all clear” just as confidently as one that looks at the right one.

What we changed

The table that every list screen uses is one shared component, so we fixed it there once instead of screen by screen. On a phone it now shows each row as a small card, with the main heading, the column beside it, and the row’s actions in a footer. That single change reached twelve screens.

The rest was the same kind of work on the dashboard and the detail page. The tiles now sit two to a row at half the padding. The eight export buttons on a quotation became a strip you can swipe. The unit price moved under the product name so the total stays in view, and the pie chart’s outside labels were dropped, because the card clipped them and the legend already said the same thing. We reviewed before and after on a design canvas before it went out.

What it did not fix

We checked six screens by measurement. The card layout reached twelve, but the log does not say we measured each of the other six, so we do not claim they were all checked.

The log also does not record that a user complained or that a quotation was misread. We found this by looking, not because someone told us, and we cannot say how long the list had been like this for the people using it.

And the card layout is a display fix. It does not make a wide table any easier to compare row against row on a small screen. It makes sure nothing is hidden.

The pattern, for anyone who has a system their staff use on phones

An automated check can pass on a screen that is wrong, because it tests one thing and the fault is in another. The owner’s version of the check takes two minutes: open your own list on an actual phone, and count the columns you expect against the columns you see.

Ask also whether anything on the screen tells you that more exists. A scroll bar, a fade at the edge, a count: something. If the answer is no, a missing column and a column that was never there look identical to the person holding the phone.

And where several screens share one table, fix the table. Twelve separate fixes would have been twelve chances to get one wrong.

Where this ends up

The portal in this story is the one behind Sazinga Quote, where every quotation is listed with its status and its totals, and where a phone is now a fair way to read them.