# Layout Review Fix Plan — 2026-04-14_run1

Generated by `/layout-review`. Total findings: **1** (+1 additional fix requested by Brett during review).

**Status:** ✅ **APPLIED 2026-04-14.** Both fixes below are merged. See §Resolution log at the bottom for the exact edits.

**Run notes:**
- Skipped screens (per user directive): `08_settings`, `09_poker_guide`.
- Main Menu was captured as scrollable (up to 8 shots per device) per user directive; on every device the 8 shots are near-identical animation frames of the same static layout — the Main Menu does **not** actually scroll on any tested device size. No layout issues found on Main Menu.
- All scrollable screens (03 Pre-Flop Result, 07 Custom Build, 10 Hand History) were captured fully via the scroll-capture protocol.
- Subagents raised several lower-priority observations that were **dropped after triage** because they matched the Known-Pattern exclusion list or Feedback History (details under §Triage notes at the bottom).

## Summary

| # | Severity | Screen | Issue | Category | Status |
|---|----------|--------|-------|----------|--------|
| 1 | P1 | best_result (tablet) | "THREE OF A KIND" winner label truncated on widest tablet — RIGHT player's cards overlap/occlude the last character of the label | Needs review → **applied (Option A extended to ALL sizes)** | ✅ fixed |
| 2 | P2 | live_ready (std-pixel8, large-iphone14max) | 4 postflop action buttons packed into a single row at 412dp/430dp — labels like "Bet 33% 1.8bb" auto-shrink below fs(18). User direction: use 2×2 grid on these phones so labels render at full size. | User-requested | ✅ fixed |

---

## Auto-Fix Eligible

_No auto-fix eligible findings in this run._

---

## Needs Review

### Issue 1 — P1: Best Result winner label truncated on tablet-ipadpro129

**Screen:** 12_best_result
**Affected devices:** tablet-ipadpro129 (1024×1366)
**Requirement violated:** REQUIREMENTS.md §12 Best Hand (result state) — "Winning hand name ... centered on the table in cyan, large font, not clipped by surrounding cards."
**Screenshot:** [review/2026-04-14_run1/tablet-ipadpro129_12_best_result.png](tablet-ipadpro129_12_best_result.png)
**First seen:** 2026-04-14

The tablet-only centered winning-hand label is rendered at `top: tableH * 0.42` spanning the full oval width. On the widest tablet (iPad Pro 12.9″, 1024dp), the LEFT and RIGHT player card groups sit at vertical midpoint and are drawn AFTER the label in the JSX tree, so they visually occlude the text. The long winner name "THREE OF A KIND" (15 chars) extends past the inside edge of the RIGHT card group and the trailing "D" gets covered — what renders on-screen is "THREE OF A KIN".

This is specifically the tablet render path at [src/screens/BestScreen.tsx:474-494](../../../src/screens/BestScreen.tsx#L474-L494). On phones the label already uses the below-table position (handled by the sibling block at L583-593 added in 2026-04-13_run4 to resolve the phone-side version of this bug).

#### Proposed fix (pick one — Brett's judgment)

All three options are `needs_review` rather than auto-fix because each involves a design trade-off on what the tablet experience should look like.

**Option A — Mirror the phone fix on wide tablets (recommended):**
Move the "below-table" label path (currently phone-only) to also cover tablets at a width threshold the iPad Pro hits. Replace `isTablet` with something like `isTablet && !isWideTablet` on the top-position block (L474), and `!isTablet || isWideTablet` on the below-table block (L583). Define `isWideTablet` as `width >= 1000` (which covers iPad Pro 12.9" but not iPad mini, where the current centered layout still looks fine).
- Pro: visually consistent with the phone fix; no overlap possible.
- Con: adds a third responsive branch — fold-zfold6-inner (768dp) and tablet-ipadmini (744dp) keep the centered-on-table layout; tablet-ipadpro129 adopts the phone style.

**Option B — Shrink the label to fit between the player cards on tablets:**
Add `numberOfLines={1}` + `adjustsFontSizeToFit={true}` to the Text at L483-492 so the label auto-shrinks to fit the available horizontal space between LEFT and RIGHT card groups.
- Pro: smallest code change, one file.
- Con: on iPad Pro the label may end up much smaller than intended; visual hierarchy with the cards suffers. Also `adjustsFontSizeToFit` does not know about the overlapping cards — it just measures the container, so it would only shrink if the container itself clipped, which it does not here.
- **Verdict: unlikely to solve the problem because the clipping is caused by draw order, not container overflow.**

**Option C — Move the tablet label above the community cards:**
Change `top: tableH * 0.42` on L479 to something like `top: tableH * 0.20` so the label sits above the community card row where nothing else is rendered.
- Pro: single-line change, preserves "centered on table" aesthetic.
- Con: visually it may look off since the community cards are the focal point of a showdown result; putting the winning hand name above them places it where the eye is less likely to land.

**Recommendation:** Option A — it mirrors the precedent set by Issue #3 in 2026-04-13_run4 where Brett's direction was to render the label below the table when player cards overlap it. The iPad Pro at 1024dp is just the tablet-sized version of the same geometry problem.

**Brett's direction (2026-04-14):** go further than Option A — make the below-table location the **default for all screen sizes**. Drop the tablet-only centered-on-table variant entirely. This means every device renders the winner label in the same position (below the oval, above NEXT HAND).

---

### Issue 2 — P2 (user-requested): Live postflop 4-button row cramped on std-pixel8 and large-iphone14max

**Screen:** 04_live_ready (postflop action state)
**Affected devices:** std-pixel8 (412×915), large-iphone14max (430×932)
**Related screenshots:**
- [screenshots/2026-04-14_run1/std-pixel8/04_live_ready.png](../../screenshots/2026-04-14_run1/std-pixel8/04_live_ready.png)
- [screenshots/2026-04-14_run1/large-iphone14max/04_live_ready.png](../../screenshots/2026-04-14_run1/large-iphone14max/04_live_ready.png)

The postflop action row packs 4 buttons (Check / Bet 33% 1.8bb / Bet 66% 3.6bb / Bet Pot 5.5bb) into a single horizontal row on phones ≥ 400dp wide. The 2-line labels (action + bb amount) auto-shrink below the fs(18) baseline via `adjustsFontSizeToFit`, making them hard to read. This was already handled on narrow phones (< 400dp via [LiveScreen.tsx:1382](../../../src/screens/LiveScreen.tsx#L1382) `winW < 400` → 47% flexBasis + flexWrap), but std-pixel8 (412dp) and iPhone 14 Max (430dp) just barely miss the threshold.

**Fix:** raise the wrap threshold from `winW < 400` to `winW < 500` so every phone (but not fold/tablets) gets the 2×2 grid. The single-row layout is preserved for fold-zfold6-inner (768dp) and tablets, where 4 buttons fit comfortably across with full fs(18) text.

---

## Resolution log

### Issue #1 — Applied [src/screens/BestScreen.tsx](../../../src/screens/BestScreen.tsx)

Per Brett's direction (2026-04-14), the below-table winner label is now the **default for every screen size** — the tablet-only in-table centered variant was deleted.

- **Removed** L474-494 (the `winnerHandName && isTablet` centered-in-table block) and its preceding comment.
- **Changed** L583 guard from `{winnerHandName && !isTablet && (` to `{winnerHandName && (` — below-table rendering now runs unconditionally.
- **Updated** both surviving comments to explain the unified behaviour.

Effect: phones, fold, iPad mini, and iPad Pro all render "THREE OF A KIND" (or whichever hand won) below the oval just above NEXT HAND. The iPad Pro truncation reported by this run is resolved and the behaviour is consistent across the entire device matrix.

### Issue #2 — Applied [src/screens/LiveScreen.tsx:1382](../../../src/screens/LiveScreen.tsx#L1382)

- **Changed** `const narrow = winW < 400 && currentDP.availableActions.length >= 4` → `winW < 500 && currentDP.availableActions.length >= 4`.
- **Updated** the surrounding comment to document which devices now get the 2×2 layout (small-se, std-galaxys24, std-pixel8, large-iphone14max) and the rationale.

Effect: on every phone with 4+ bet-size actions the buttons render in a 2×2 grid with ~47% width each. Fold (768dp) and all tablets keep the single-row layout where full width per button is already comfortable.

### Type-check
`npx tsc --noEmit` clean (pre-existing HandDetailScreen.tsx(71,9) TS2783 noise is tracked in CLAUDE.md and was present before this change).

### Feedback History updates
Both decisions were logged to [REQUIREMENTS.md §Feedback History](../../REQUIREMENTS.md) so future layout-review runs don't undo them.

---

## Triage notes — findings raised by subagents but not included

These were evaluated and dropped after verification. Kept here so a future run's subagents can see them as "already considered":

| Subagent finding | Devices | Reason dropped |
|------------------|---------|----------------|
| "Build button not visible in Custom Build bottom shot" | all 7 devices | **Known pattern.** REQUIREMENTS.md §Known Patterns marks the Play button as rendered-but-dark-on-dark when inactive (no scenario selected). Confirmed by reading 07_custom_build_b.png on multiple devices — the button frame is present but invisible due to the inactive styling. |
| Live Ready 4 bet buttons cramped on single row | large-iphone14max | **Feedback History 2026-04-13_run4.** Narrow-phone (<400dp) wrap-to-2x2 is intentional; 430dp is wide enough for single-row, which IS the intended design at this width. |
| Coaching text at bottom partially behind red FAB | std-galaxys24, std-pixel8, tablet-ipadpro129 | **Known pattern** (single-line FAB overlap tolerated) + **Feedback 2026-04-14 (run5)** (red "!" FAB is temporary — do not flag any FAB-caused overlap). |
| Hand History captured in populated state, not empty state | std-galaxys24, std-pixel8, large-iphone14max, tablet-ipadpro129 | Capture-time artifact — the run used the app's current AsyncStorage state which already contained hand history. Not a layout bug. Populated-state layout looks clean across devices. |
| Live Ready Hero/Villain/Other legend not visible | std-pixel8, std-galaxys24 | The Live Ready deep-link lands in a state that has auto-advanced past preflop on some devices (flop already dealt, postflop action row shown). The "legend" line doesn't exist in the postflop state. Not a layout bug — it's a capture-state issue tangential to this review. |
| Mini Custom Build preview cards blank | std-pixel8 | Intentional — no rank/suit selected yet at capture time, so placeholder face-down cards render. Not a bug. |
| Custom Build shot _a compressed vs _b | large-iphone14max | Capture-timing artifact (screen not fully hydrated on first shot). The _b shot confirms the layout is correct at rest. Recommend increasing the scroll-capture initial-settle sleep for Custom Build if this recurs. |