# Layout Review Fix Plan — 2026-04-15/run2 Generated by `/layout-review`. Total findings: **9** (5 false positives removed per Brett's 2026-04-15 directive — see end). Configuration: landscape only, all 7 devices, all 12 screens. 232 screenshots evaluated. Review this plan and approve before any changes are made. This skill did not modify any source files. ## Summary | # | Severity | Screen | Issue | Category | |---|----------|--------|-------|----------| | 1 | P1 | 05 Read | "Straight Flush" button label truncated to "Straight F..." on landscape phones | Auto-fix | | 2 | P2 | 02 Pre-Flop / 04 Live | Body sits low — large empty band above 4-column row on fold + tablet landscape | Needs review | | 3 | P2 | 04 Live | Postflop bet button labels (Bet 33% / Bet 66%) too small on small phone landscape | Needs review | | 4 | P2 | 07 Custom Build | Empty dark placeholder panel at bottom — reads as layout gap | Needs review | | 5 | P2 | 08 Settings | Tablet landscape: stretched single-column with wide rails (was P0, partial fix) | Needs review | | 6 | P2 | 09 Poker Guide | Tablet landscape: content left-aligned with empty right side (was P0, partial fix) | Needs review | | 7 | P2 | 01 Main Menu | Stretched single-column landscape on multiple devices (visual density only — NOT scroll-cutoff) | Needs review | | 8 | P3 | 02 Pre-Flop | Hero cards oversized vs. compressed table on fold landscape | Needs review | | 9 | P3 | 02 Pre-Flop | Action history list floats disconnected mid-screen on tablet landscape | Needs review | --- ## Auto-Fix Eligible These are safe, mechanical changes (simple value tweaks per REQUIREMENTS.md §Plan-Eligible Fix Classes). Each includes exact `old_string` / `new_string` pairs ready for the Edit tool. ### Fix 1 — P1: "Straight Flush" button label truncates to "Straight F..." on landscape phone Read screen **Screen:** 05 Read (ranking button grid, landscape 3×3 layout) **Affected devices:** small-se-land, std-galaxys24-land **Requirement violated:** REQUIREMENTS.md §Global Rules — No Clipping or Overflow (button labels must be fully visible, no `...` ellipsis); §05 Read Landscape (button column does not use a ScrollView; all 9 ranking buttons fit without scrolling — implies labels must remain readable) **Screenshots:** - review/2026-04-15/run2/small-se-land_05_read.png - review/2026-04-15/run2/std-galaxys24-land_05_read.png The 3×3 ranking grid on landscape phones is laid out at `width: '32%'` per cell with `paddingHorizontal: fs(4)` — at narrow landscape widths the longest label "Straight Flush" exceeds the available text width and the existing `numberOfLines={1}` truncates it to "Straight F...". The `ActionButton3D` component renders the label with `numberOfLines={1}` but does NOT enable `adjustsFontSizeToFit`, so React Native cannot shrink the label to fit. Adding `adjustsFontSizeToFit` + `minimumFontScale={0.7}` lets the longest label scale down by up to 30% to fit while leaving every other label rendered at its natural size. This is a low-risk, layout-neutral change that benefits every button in the app, not just the Read grid. **Edit** (`src/components/ActionButton3D.tsx` line 311): - `old_string`: ```ts {label} ``` - `new_string`: ```ts {label} ``` **Why this is safe:** `adjustsFontSizeToFit` only activates when the rendered text would otherwise be clipped. Buttons whose labels already fit are unchanged. `minimumFontScale={0.7}` floors the shrink at 70% of the requested size so very tight cells never produce illegible text. The change is global to `ActionButton3D` so it applies everywhere the component is used. --- ## Needs Review These require design decisions, layout restructuring, or have potential side effects. Each includes a proposed fix approach for Brett's judgment. ### Issue 2 — P2: Pre-Flop / Live landscape — table doesn't fill vertical space, large empty band above body **Screen:** 02 Pre-Flop ready, 04 Live ready **Affected devices:** fold-zfold6-inner-land (832×768), tablet-ipadpro129-land (1366×1024) **Requirement violated:** REQUIREMENTS.md §02/§04 Landscape layout — "Table uses `landscapeTableAspect = 1.2` (squarer / more circular than the previous 1.75 wide oval) **and fills the available vertical space**"; Global Rules §Screen Space Utilization **Screenshots:** - review/2026-04-15/run2/fold-zfold6-inner-land_02_preflop_ready.png - review/2026-04-15/run2/fold-zfold6-inner-land_04_live_ready.png - review/2026-04-15/run2/tablet-ipadpro129-land_02_preflop_ready.png - review/2026-04-15/run2/tablet-ipadpro129-land_04_live_ready.png **First seen:** 2026-04-15 (run1 issue #3 — partial regression / different device) The 4-column body row sits in a vertically-centered band that occupies only ~40-50% of the viewport height; the upper ~30% (and bottom ~20%) is empty dark padding. The table does not "fill the available vertical space" as the spec requires — instead it appears to be sized purely from column width. **Proposed fix:** In `src/screens/TrainScreen.tsx` and `src/screens/LiveScreen.tsx` landscape branch: - Wrap the body row in `flex: 1` with `alignItems: 'stretch'` and `justifyContent: 'flex-start'` directly under the header. - Compute available body height as `(H - headerH - safeBottom)`. - Pass that height into `PokerTable` so the table diameter is `Math.min(columnW, availBodyH * 1.2)` instead of just `columnW * 1.2`. - For the Live screen, also `alignItems: 'flex-start'` on the row so the action history column is top-aligned with the table column (it currently sits visually below center). Side effect to watch: hero cards and decision buttons may also need their max heights raised to keep visual proportions when the table grows. --- ### Issue 3 — P2: Live postflop bet button labels (Bet 33% / Bet 66%) too small on small phone landscape **Screen:** 04 Live ready (postflop stacked-button column) **Affected devices:** small-se-land **Requirement violated:** REQUIREMENTS.md §04 Live Landscape — "Long bet labels (e.g. `Bet 4.5bb`) use `adjustsFontSizeToFit` to stay on a single line" (interpretation: while text stays on one line, it must remain legible per Global text-size minimums); §Global Rules — Action button label ≥ 16sp on phones **Screenshot:** review/2026-04-15/run2/small-se-land_04_live_ready.png **First seen:** 2026-04-15 In landscape on small phones the postflop stacked buttons (Check / Bet 33% / Bet 66% / Bet Pot) compress vertically to fit four buttons in the right column. The "Bet 33% 1.8bb" and "Bet 66% 3.6bb" labels visibly shrink under `adjustsFontSizeToFit` to a size that is hard to read. **Proposed fix:** In `src/screens/LiveScreen.tsx` landscape postflop branch, when 4 stacked buttons would force per-button height < ~52dp, switch to 2×2 grid (matching the existing portrait small-phone treatment). Or alternatively show only Check + Bet Pot + a "More" expand control on landscape narrow phones. --- ### Issue 4 — P2: Custom Build empty dark placeholder panel at bottom **Screen:** 07 Custom Build (final scroll shot) **Affected devices:** large-iphone14max-land, tablet-ipadpro129-land **Requirement violated:** REQUIREMENTS.md §Global Rules — Screen Space Utilization (empty containers without hierarchy purpose are dead space) **Screenshots:** - review/2026-04-15/run2/large-iphone14max-land_07_custom_build_c.png - review/2026-04-15/run2/tablet-ipadpro129-land_07_custom_build_b.png **First seen:** 2026-04-15 The bottom of the Custom Build form contains a large empty dark rounded rectangle reserved for the Build/Play button (which is gated until scenario type + 2 cards are picked). With no content or hint text, the empty panel reads as a layout bug. **Proposed fix:** In `src/screens/CustomBuildScreen.tsx`, render the disabled Build/Play button always (with disabled styling and `disabled={true}`) plus a hint label inside it like "Select a scenario and 2 cards to enable Play." This eliminates the empty box and signals required prerequisite state. Alternatively hide the placeholder until the user has progressed past the scenario picker. --- ### Issue 5 — P2: Settings tablet landscape — stretched single-column with wide rails **Screen:** 08 Settings **Affected devices:** tablet-ipadpro129-land **Requirement violated:** REQUIREMENTS.md §Tablet Special Rules — single-column phone layouts stretched to tablet width are always flagged P2+ **Screenshot:** review/2026-04-15/run2/tablet-ipadpro129-land_08_settings_a.png **First seen:** 2026-04-15 (resolved partially — was P0 in run1 #2, content now renders + version visible; remaining concern is layout density) Each Settings row (toggle, slider, version label) runs near-full 1366dp width with huge horizontal rails of empty space that serve no hierarchy purpose. Better than run1 (no longer "nearly empty") but still underutilizes the canvas. **Proposed fix:** In `src/screens/SettingsScreen.tsx`, on tablet-landscape (`isLandscape && width >= 744`): - Option A: Two-column grid — General / Display on left, Sound Effects on right. - Option B: Cap content column width at ~800dp and center it (less work, less dramatic improvement). Option A produces a more native-tablet feel; Option B is the minimum viable improvement. --- ### Issue 6 — P2: Poker Guide tablet landscape — content left-aligned, empty right side **Screen:** 09 Poker Guide **Affected devices:** tablet-ipadpro129-land **Requirement violated:** REQUIREMENTS.md §Tablet Special Rules — "On tablet: text column should be wider than on phone across every shot, not just the top" **Screenshot:** review/2026-04-15/run2/tablet-ipadpro129-land_09_poker_guide_a.png **First seen:** 2026-04-15 (resolved partially — was P0 in run1 #1, was a ~60dp column. Now wide column but left-aligned with empty right space on iPad Pro) Hand Rankings entries (rank badge + title + description + mini cards row) all left-align within ~60% of the available width, leaving the right side empty. **Proposed fix:** In `src/screens/PokerGuideScreen.tsx`, on landscape tablet, render Hand Rankings in a 2-column grid (5 rankings per column). Same treatment for Positions / Action Types / Terms sections. Alternatively let the mini-card row expand horizontally to fill the wider tablet column. --- ### Issue 7 — P2: Main Menu landscape — stretched single-column on multiple devices **Screen:** 01 Main Menu **Affected devices:** std-galaxys24-land, fold-zfold6-inner-land, tablet-ipadmini-land, tablet-ipadpro129-land **Requirement violated:** REQUIREMENTS.md §Tablet Special Rules — single-column phone layouts stretched to tablet width are flagged P2+; §01 Main Menu — "On tablet: consider whether the 5 buttons could use a two-column grid layout" **Note on scope:** This is a **visual density** finding, NOT a "requires scrolling" finding. The Main Menu is intentionally scrollable so any button being below the first viewport is fine per Brett's 2026-04-15 directive. What is being flagged here is that on landscape devices the per-button row stretches across the full 780-1366dp width with huge interior dead space between the left-aligned label and the right-side card graphic, not that anything is unreachable. **Screenshots:** - review/2026-04-15/run2/std-galaxys24-land_01_main_menu_a.png - review/2026-04-15/run2/fold-zfold6-inner-land_01_main_menu_a.png - review/2026-04-15/run2/tablet-ipadmini-land_01_main_menu_a.png **Proposed fix:** In `src/screens/MainMenuScreen.tsx`, branch to a 2-column landscape mode-button grid when `isLandscape && width >= 700`: - Row 1: Pre-Flop | Live - Row 2: Read | Best - Row 3: Custom (full width or centered) - Bottom row: Poker Guide + Hand History (existing) This uses the wide canvas productively rather than rendering each button as a wide bar with interior dead space. Phone-landscape narrow widths (small-se 375dp tall) can keep the single-column layout because the device width doesn't justify columns. --- ### Issue 8 — P3: Pre-Flop ready hero cards oversized vs. compressed table on fold landscape **Screen:** 02 Pre-Flop ready **Affected devices:** fold-zfold6-inner-land **Requirement violated:** REQUIREMENTS.md §Global Rules — Screen Space Utilization (one zone should not dominate at the expense of another being unusably small) **Screenshot:** review/2026-04-15/run2/fold-zfold6-inner-land_02_preflop_ready.png **First seen:** 2026-04-15 Hero cards appear as tall as the poker table's minor axis on a 832×768 near-square landscape. Likely a knock-on effect of Issue 2 — once the table fills vertical space properly, the proportional mismatch should resolve. If not, cap hero card height in landscape to `min(cardScale * baseHeight, availBodyH * 0.35)`. **Proposed fix:** Defer until Issue 2 is fixed; re-evaluate proportions afterward. If still oversized, apply the height cap above in `src/screens/TrainScreen.tsx` landscape hero card style. --- ### Issue 9 — P3: Pre-Flop ready action history floats disconnected mid-screen on tablet landscape **Screen:** 02 Pre-Flop ready **Affected devices:** tablet-ipadpro129-land **Requirement violated:** REQUIREMENTS.md §Definition of Good Layout — clear visual hierarchy; chrome supports game content **Screenshot:** review/2026-04-15/run2/tablet-ipadpro129-land_02_preflop_ready.png **First seen:** 2026-04-15 The action history list ("1. UTG folds ... 7. Action is on you") sits in the negative space between the table (left) and hero cards (center) with no visual anchor — no panel background, no border, no alignment. On a 1366dp-wide canvas it reads as floating text. **Proposed fix:** In `src/screens/TrainScreen.tsx` landscape body, give the action history column a subtle panel background (`backgroundColor: 'rgba(255,255,255,0.03)'`) and rounded corners, OR a left/right border, OR top-align it with the table and use a thin vertical rule to associate the two columns. Same treatment in `src/screens/LiveScreen.tsx`. --- ## Removed as false positives (per Brett's 2026-04-15 directive) The following findings were removed from this plan because they all flagged "content is below the fold / requires scrolling" on screens that are intentionally scrollable. Per Brett's guidance the user can swipe to reach later content, so these are not bugs. The skill rules in REQUIREMENTS.md §Scrollable Screens have been updated so these false positives don't recur. - **(was Issue 2 P1)** "Next Hand →" clipped at bottom of `03_preflop_result_a` on multiple landscape phones — Pre-Flop result is scrollable. - **(was Issue 3 P1)** Custom Build picker pushed below fold on iPad Pro landscape — Custom Build is scrollable. - **(was Issue 4 P1)** Main Menu requires scroll on iPad mini landscape — Main Menu is scrollable. - **(was Issue 11 P3)** Main Menu small-phone landscape bottom row needs scroll — Main Menu is scrollable. - **(was Issue 14 P3)** Pre-Flop result ResultPanel below fold on iPhone Max landscape — Pre-Flop result is scrollable. --- ## Resolved from previous run (2026-04-15/run1) The following P0/P1 findings from run1 (about an hour ago) appear FIXED in this run. No action needed — included for traceability. - **run1 #4 P1** ReadScreen landscape card-circle overflow → fixed on small/std/fold/tablet (subagent over-flagged on large-iphone14max-land; verified clean). - **run1 #5 P1** BestScreen landscape card-circle overflow + header overlap → fixed on all devices. - **run1 #1 P0** iPad Pro Poker Guide ~60dp column → resolved to wide column (still has Issue 6 polish concern). - **run1 #2 P0** iPad Pro Settings nearly empty → resolved (still has Issue 5 stretched-column concern). - **run1 #3 P0** iPad Pro Train/Live missing two-column → 4-column landscape body now in place (still has Issue 2 dead-space concern). - **run1 #15 P2** Settings landscape tablet left-aligned → no longer flagged on fold-zfold6-inner-land or tablet-ipadmini-land.