Implement the 020-fix-zero-hp-opacity feature that replaces container-level opacity dimming with element-level opacity on individual leaf elements so that HP popover and condition picker render at full opacity for unconscious combatants

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-06 15:43:27 +01:00
parent 0c0da9b90e
commit 04a4f18f98
9 changed files with 489 additions and 14 deletions

View File

@@ -0,0 +1,47 @@
# 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
```bash
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
```bash
pnpm check # Must pass before commit
```