# Layout Review Fix Plan — Iteration 15

Generated by `/layout-review` on 2026-04-17. Total findings: **10**.
Review this plan and approve before any changes are made. This skill did not modify any source files.

**Run config:** portrait + landscape, 7 devices, selective screen set.
Portrait excluded: Read, Best, Custom Build, Settings, Poker Guide (result states of Read/Best still captured).
Landscape excluded: Main Menu, Custom Build, Settings, Poker Guide.

## Summary

| # | Severity | Screen | Device(s) | Issue | Category |
|---|----------|--------|-----------|-------|----------|
| 1 | P1 | live_ready (postflop) | small-se | 2x2 bet-size buttons clipped at viewport bottom | Needs review |
| 2 | P1 | live_ready (postflop) | fold-zfold6-inner | Community cards, POT pill, chips, BB seat collide at table center | Needs review |
| 3 | P1 | live_ready (postflop) | fold-zfold6-inner-land | 4 bet-size buttons in one row — bet-size text clipped | Needs review |
| 4 | P1 | preflop_ready | tablet-ipadpro129 | Action history row clipped at left edge ("TG folds") | Needs review |
| 5 | P1 | live_ready | tablet-ipadpro129 | Action history row clipped at right edge ("— FLOP →") | Needs review |
| 6 | P2 | 02 / 04 / 05 / 06 / 11 / 12 (landscape) | tablet-ipadpro129-land | 150-250dp dead space + table clip; iter14 Issue #2 still_present | Needs review |
| 7 | P2 | best_result | small-se, tablet-ipadpro129 | Hole cards overlap neighboring groups after float animation | Needs review |
| 8 | P3 | 02 / 04 (landscape) | std-galaxys24-land | Table bottom arc clips against viewport bottom; iter14 #4 still_present | Needs review |
| 9 | P3 | best_result | tablet-ipadmini-land | Right-column dead space below NEXT HAND button; iter14 #5 still_present | Needs review |
| 10 | P3 | capture-pipeline | (n/a) | Live mode state-bleed between captures — deep link doesn't reset state | Needs review |

## Resolved Since Iteration 14

- **iter14 #1** Short-landscape phone 3-stack action button clipping — confirmed fixed on small-se-land.
- **iter14 #2 (ipadmini portion)** Landscape tablet dead space — confirmed fixed on tablet-ipadmini-land.

---

## Auto-Fix Eligible

*No findings qualify this iteration. Action-history clipping (Issues #4 / #5) is mechanically a small `paddingHorizontal + scrollToEnd` addition but touches the layout surface and benefits from a quick Brett review before applying — moved to Needs Review.*

---

## Needs Review

### <h3 id="issue-1">Issue 1</h3> — P1: Live postflop 2x2 bet-size buttons clipped on small-se

**Screen:** live_ready (postflop state captured by accident — see Issue #10)
**Affected devices:** small-se
**Requirement violated:** REQUIREMENTS.md §No Clipping or Overflow; §04 Live Simulation

The 2x2 postflop layout (Check / Bet 33% 1.8bb / Bet 66% 3.6bb / Bet Pot 5.5bb) has its bottom row clipped below the 667px viewport on small-se (375x667). Only the top half of Bet 66% and Bet Pot is visible. Feedback 2026-04-14 run1 established 2x2 as the correct layout for <500dp width, but on the shortest small phone the row does not fit.

**Proposed fix:**
LiveScreen.tsx — reduce vertical padding for small phones where `width <= 393 AND height <= 670`:
- (A) Shrink inter-row gap inside 2x2 grid from ~fs(10) to ~fs(6)
- (B) Shrink hero-card container height by ~10-15dp on short small phones
- (C) Clamp button minHeight at fs(44)
Recommend A + B combined. Verify Fold/Call/Raise 3-button preflop layout is not squeezed further.

---

### <h3 id="issue-2">Issue 2</h3> — P1: Live POT pill overlaps community cards on fold-zfold6-inner

**Screen:** live_ready (postflop state captured by accident)
**Affected devices:** fold-zfold6-inner
**Requirement violated:** REQUIREMENTS.md §No Overlapping; §Card Separation

On near-square portrait (768x832), the community card placeholder row, POT 2.5bb pill, 0.5bb chip, 1bb chip, 2.5bb bet stack, and BB YOU seat all collide in ~80dp vertical band at table center. Community slots and POT pill visibly overlap; chips stack on top of each other; pill text partially obscured.

**Proposed fix:**
In PokerTable.tsx community-card positioning, on near-square portrait (`isNearSquare` or `aspect < 1.2`):
- (A) push community-card row higher (above pot indicator),
- (B) push pot indicator below community row,
- (C) increase table height so zones separate naturally.
Also review chip-stack y-anchor on BB seat so 1bb/0.5bb stacks do not share y-range with pot pill.

---

### <h3 id="issue-3">Issue 3</h3> — P1: Live 4-button row text clipping on fold-zfold6-inner-land

**Screen:** live_ready (postflop state)
**Affected devices:** fold-zfold6-inner-land
**Requirement violated:** REQUIREMENTS.md §No Clipping; CLAUDE.md Android Rendering Notes

Four postflop action buttons are in a single row on fold-zfold6-inner-land (uses portrait layout per near-square rule, 768dp width). Bet-size text descenders (e.g. '1.8bb') clip at the button bottom edge. CLAUDE.md: "Never put more than 2-3 buttons in a single flexDirection: row."

**Proposed fix:**
LiveScreen.tsx postflop row — extend the 2x2 wrap rule to `isNearSquare OR width < 500dp`, OR enable `adjustsFontSizeToFit + numberOfLines={1} + minimumFontScale={0.8}` on bet-size sublabels. Recommend the 2x2 extension since clipped text is harder for users to detect than smaller legible text.

---

### <h3 id="issue-4">Issue 4</h3> — P1: Preflop action history clipped left edge on tablet-ipadpro129

**Screen:** preflop_ready
**Affected devices:** tablet-ipadpro129
**Requirement violated:** REQUIREMENTS.md §No Clipping or Overflow; §02 Pre-Flop Training

On 1024x1366 portrait, the history ScrollView overflows the left viewport edge — first action shows "TG folds" with the leading 'U' of "UTG folds" cut off. No horizontal padding; no auto-scroll-to-end behavior.

**Proposed fix:**
TrainScreen.tsx portrait history ScrollView:
- (a) add `contentContainerStyle={{ paddingHorizontal: fs(12) }}`
- (b) `scrollToEnd({ animated: false })` in a useEffect tied to action list length so newest action anchors at the right edge rather than oldest clipping at the left.

---

### <h3 id="issue-5">Issue 5</h3> — P1: Live action history clipped right edge on tablet-ipadpro129

**Screen:** live_ready
**Affected devices:** tablet-ipadpro129
**Requirement violated:** REQUIREMENTS.md §No Clipping or Overflow; §04 Live Simulation

Trailing "— FLOP →" segment truncated mid-character at the right viewport edge on 1024x1366 portrait. Same root cause as Issue #4 on TrainScreen.

**Proposed fix:**
LiveScreen.tsx — apply the Issue #4 fix (paddingHorizontal + scrollToEnd). Recommend doing both at once for consistency.

---

### <h3 id="issue-6">Issue 6</h3> — P2: Landscape tablet dead space + table clip (iter14 #2 still_present on ipadpro129-land)

**Screen:** 02 / 04 / 05 / 06 / 11 / 12 (all landscape)
**Affected devices:** tablet-ipadpro129-land
**Requirement violated:** REQUIREMENTS.md §Tablet Special Rules — table must fill more of the screen

Recurring from iter 14. 4-col body (Train/Live) and 50/50 split (Read/Best/results) leave 150-250dp of dead vertical space above AND below the content cluster on 1366x1024. In 02/04 the table circle also clips at top (HJ seat) AND bottom (BB/YOU). The iter 14 dynamic-aspect fix landed on ipadmini-land but not ipadpro129-land — width-first sizing still caps table height.

**Proposed fix:**
Derive tableH/feltH from actual bodyRowH via `Math.min(bodyRowH - gutter, colW / aspect)` rather than width-first. Wrap 4-col body (TrainScreen/LiveScreen) and 50/50 body (ReadScreen/BestScreen + result variants) in `flex: 1` containers so the body row measures its own height. Apply on tablet-ipadpro129-land and any future landscape tablets with aspect >= 1.3.

---

### <h3 id="issue-7">Issue 7</h3> — P2: Best result hole cards overlap neighboring groups

**Screen:** best_result
**Affected devices:** small-se, tablet-ipadpro129
**Requirement violated:** REQUIREMENTS.md §Card Separation

After the winning-card float animation raises contributing cards:
- **small-se:** RIGHT player's 5h/9c (cyan highlight) sit flush against MIDDLE player's J/5c — no horizontal gap between groups.
- **tablet-ipadpro129:** MIDDLE player's floated 9d hole card top edge intersects the bottom edge of the 4d community card.

**Proposed fix:**
In BestScreen.tsx / PokerTable float-up treatment:
- (a) add horizontal inter-player minimum gap of `fs(8)` on small phones so RIGHT hole cards cannot drift into MIDDLE x-range
- (b) clamp float-up y-offset via `Math.min(floatUp, communityBottom - midCardTop - fs(12))` so a contributing hole card cannot touch the community row
Apply on all device sizes; scale thresholds by fs().

---

### <h3 id="issue-8">Issue 8</h3> — P3: Table bottom arc clips on std-galaxys24-land (iter14 #4 still_present)

**Screen:** 02 preflop_ready + 04 live_ready (landscape)
**Affected devices:** std-galaxys24-land
**Requirement violated:** REQUIREMENTS.md §Global Rules §No Clipping

Recurring from iter 14. Table bottom arc and BTN YOU seat sit flush against the viewport bottom edge on 780x360 (shortest landscape H) with no breathing room. Marginally better than iter 14 but still tight.

**Proposed fix:**
useResponsive.ts landscape table sizing: for `H <= 375` landscape phones add `tableMaxH = H - headerH - insets - fs(16)` clamp. `tableH = Math.min(tableMaxH, tableW / landscapeTableAspect)`. If tableH shrinks below `tableW/1.2`, reduce tableW proportionally so oval aspect stays >= 1.2.

---

### <h3 id="issue-9">Issue 9</h3> — P3: Best result right-column dead space on tablet-ipadmini-land (iter14 #5 still_present)

**Screen:** best_result
**Affected devices:** tablet-ipadmini-land
**Requirement violated:** REQUIREMENTS.md §Screen Space Utilization (soft)

Recurring from iter 14. ~240dp dead space below NEXT HAND button in the right column on 1133x744. Button top-anchored under the top bar; remaining vertical space empty.

**Proposed fix:**
- (A) Vertically center NEXT HAND button in right column
- (B, recommended) Add a compact hand-strength summary row above NEXT HAND to match Read result's right-column density
- (C) Grow NEXT HAND height on tall landscape tablets (fs(72) → fs(120))

---

### <h3 id="issue-10">Issue 10</h3> — P3: Live mode state-bleed between captures (pipeline)

**Screen:** n/a — capture-pipeline observation
**Affected devices:** small-se, fold-zfold6-inner, fold-zfold6-inner-land, std-pixel8-land (various)
**Requirement violated:** n/a — pipeline observation

The `pokersharp://live` deep link does not reset Live mode state. If a previous capture session left a hand in progress, the next Live capture renders postflop (community cards dealt, 4 bet buttons) instead of the intended preflop ready state. Iter 15 small-se / fold-zfold6-inner / fold-zfold6-inner-land captured postflop by accident — it *did* surface Issues #1 / #2 / #3 but is unreliable for repeatable review.

**Proposed fix:**
- (A, user-facing) Live deep-link handler in App.tsx clears in-flight hand state on navigation so the ready screen renders fresh.
- (B, review-only) Add `pokersharp://live?reset=1` param or a second path `pokersharp://live-reset`.
- (C, review-only) In capture script, navigate to Main Menu between devices via KEYCODE_HOME + relaunch to flush state.
Recommend A for user-facing correctness + B/C for review reliability.

---

*Skill did not modify any source files. Review this plan, approve, or say "apply all fixes and recheck" to trigger Phase 8.*