initiative/specs/020-fix-zero-hp-opacity/quickstart.md

Quickstart: Fix Zero-HP Opacity

Feature: 020-fix-zero-hp-opacity Date: 2026-03-06

Problem

When a combatant reaches 0 HP, the entire row gets opacity-50 applied to the outermost container. This cascades to absolutely-positioned child elements (HP adjust popover and condition picker dropdown), making them semi-transparent and hard to use.

Fix Location

Single file: apps/web/src/components/combatant-row.tsx

Fix Strategy

1. Remove opacity-50 from the outer row <div> (line 312).
2. Apply opacity-50 to individual leaf/display elements within the row when status === "unconscious":
   • Initiative input
   • Name display
   • AC display
   • HP current value button (inside ClickableHp)
   • HP separator slash
   • Max HP display
   • Concentration button
   • Condition tags
   • Remove button
3. The HpAdjustPopover and ConditionPicker components — which are absolutely positioned overlays — are not wrapped in any dimmed container, so they render at full opacity.

Key Constraint

CSS opacity on a parent element creates a stacking context that affects all children. There is no way to "undo" a parent's opacity on a child element. The fix must ensure popovers are never DOM descendants of an element with reduced opacity.

Verification

pnpm --filter web dev   # Start dev server
# 1. Add a combatant, set max HP, reduce current HP to 0
# 2. Click HP value — popover should appear at full opacity
# 3. Click conditions area — picker should appear at full opacity
# 4. Row content (name, initiative, etc.) should still appear dimmed

Quality Gate

pnpm check   # Must pass before commit