Five cards, three visible
I had been testing the phone layout by narrowing a desktop window, which is a way of being told what you want to hear. So I measured the real thing.
Portrait, 390×844. Of five cards in hand, three were fully on screen. The other two sat at −109…3 px and 387…499 px — half off each edge. Planning a turn meant scrolling the hand sideways and remembering what you saw.
Landscape, 844×390. The enemy was 75% visible. The intro dialog started at −47 px, so its first line could be neither read nor scrolled to, and there were three pixels of clearance between the consent bar and the buttons.
What fixed it:
- cards down to 96 px on phones, with the hand overlapping itself — all five visible at once;
- the veil over the card art cut from 48 px to 28: on a 144 px card it was covering the name;
- enemies pinned to the top on narrow screens instead of centred, because centring pushes the enemy's name under the hand;
- landscape switches to the desktop layout — the condition is screen height, not width. The problem was never "phone", it was "no vertical space".
Two things I only caught because I looked at a screenshot instead of the
numbers. First, p-2 from the same media query was overriding the arena's
bottom padding, so the hand covered 26% of the enemy — exactly the name and the
hull bar. The test passed, because "fits on screen" and "is visible" are
different questions; it now measures overlap too. Second, the enemy card at
172 px did not fit the ~170 px left over, which the numbers would have told me
if I had thought to ask.
And one piece of grit that cost me a whole test run: a comment inside a
template-literal className is not a comment. The backtick in it ends the
string, the file stops parsing, and the failure presents itself as a timeout on
a button. Comments go inside ${…}.
What I left alone, deliberately: in landscape the first-fight hint covers 60% of one enemy and 20% of another. On a 390 px screen there is no free space — any position covers something, and the hint is dismissed by one tap and never returns. Moving it is only worth doing together with deciding what it should cover.
The guard for all of this fails if you put the card back to 112 px, and it says why: "3 of 5 cards fully visible". That sentence is the part I am proudest of. Which measurement would you want a test to shout at you?