Defensive Setup — Compact Mockups

Mobile-first (400px max). Dark mode only for brevity.

Scenario: No Choices Available

Bases empty, not a walk-off situation. Both infield and outfield only have "Normal".

ALL DESIGNS → Component hidden entirely

Nothing renders here. The defensive setup component is completely removed from the DOM.

The DecisionPanel auto-submits default values (normal/normal/no holds) and skips to offensive phase.

Scenario: Runner on 3rd

Infield depth matters (3 options). Outfield still only "Normal". Hold runners available for R3.

Design A — Inline Segmented Controls

🛡️ Defense

Infield
Hold

Design B — Ultra Compact (Single Card Row)

🛡️ Defense
Infield
Hold

Design C — Toolbar Strip

🛡️
IF:
Hold:

Scenario: Full Options (R1 + R3, Walk-off)

All infield options + shallow outfield + hold runners on 1st and 3rd.

Design A — Inline Segmented Controls

🛡️ Defense

Infield
Outfield
Hold

Design B — Ultra Compact

🛡️ Defense
Infield
Outfield
Hold

Design C — Toolbar Strip

🛡️
IF:
OF:
Hold:

Size Comparison: Current vs Design A

Same scenario (R3 only) showing height saved.

CURRENT (~340px tall)

🛡️ Defensive Setup

Current Setup

Infield: Normal
Outfield: Normal
Holding: None

DESIGN A (~120px tall)

🛡️ Defense

Infield
Hold

Recommendation

Design A (Inline Segmented) is the best balance of compactness and usability:

  • ~65% height reduction vs current design
  • All options visible at a glance — no scrolling needed
  • Touch targets still meet 44px minimum on the segmented buttons
  • Labels (Infield/Outfield/Hold) provide clear context without verbose headers
  • Confirm button in the header row saves a full row of vertical space
  • Removes redundant "Current Setup" preview — the buttons are the preview
  • Horizontal layout works well on mobile portrait (400px fits 3 segments comfortably)

Design B is even more compact but abbreviates labels (Norm/In/Corn) which hurts readability.
Design C is the most compact but gets cramped in the full-options scenario and doesn't scale well.

Auto-hide logic:

When hasDefensiveChoices is false (no runner on 3rd AND not walk-off), auto-submit defaults and skip to offensive phase. The component never renders.