# Tasks: Fix Concentration Shake Glow Clipping

**Input**: Design documents from `/specs/033-fix-concentration-glow-clip/`
**Prerequisites**: plan.md (required), spec.md (required for user stories), research.md, data-model.md, quickstart.md

**Tests**: No test tasks — this is a CSS-only visual fix. Verification is done via manual inspection per quickstart.md.

**Organization**: Tasks are grouped by user story to enable independent implementation and testing of each story.

## Format: `[ID] [P?] [Story] Description`

- **[P]**: Can run in parallel (different files, no dependencies)
- **[Story]**: Which user story this task belongs to (e.g., US1, US2)
- Include exact file paths in descriptions

## Phase 1: Setup

**Purpose**: No setup needed — existing project, no new dependencies or configuration changes.

*(No tasks in this phase)*

---

## Phase 2: Foundational (Blocking Prerequisites)

**Purpose**: No foundational work needed — the fix modifies existing CSS layout only.

*(No tasks in this phase)*

---

## Phase 3: User Story 1 - Concentration Damage Glow Visible (Priority: P1) MVP

**Goal**: The concentration-damage glow effect is fully visible on both left and right edges without clipping.

**Independent Test**: Deal damage to a concentrating creature and verify the purple glow extends fully on all sides without being cut off at container edges.

### Implementation for User Story 1

- [x] T001 [US1] Add horizontal padding (`px-2`) to the inner combatant list container `<div className="flex flex-col pb-2">` in `apps/web/src/App.tsx` (line ~158) so the `box-shadow` glow renders within the overflow area instead of being clipped

**Checkpoint**: At this point, the glow should be fully visible on left and right edges.

---

## Phase 4: User Story 2 - No Layout Side Effects (Priority: P1)

**Goal**: The padding fix does not introduce horizontal scrollbars, layout shifts, or visual artifacts.

**Independent Test**: Trigger the animation at desktop and mobile widths (320px+), confirm no horizontal scrollbar appears and no elements shift position.

### Implementation for User Story 2

- [x] T002 [US2] Verify at desktop and mobile viewports (320px+) that the padding added in T001 does not cause a horizontal scrollbar or layout shift in `apps/web/src/App.tsx`; also verify that multiple concentrating rows animating simultaneously display independent glows without overlap artifacts; adjust padding value if needed

**Checkpoint**: Animation renders correctly at all viewport widths with no side effects.

---

## Phase 5: Polish & Cross-Cutting Concerns

**Purpose**: Final validation and quality gates.

- [x] T003 Run `pnpm check` to ensure all quality gates pass (lint, typecheck, tests, coverage)
- [x] T004 Run quickstart.md validation steps from `specs/033-fix-concentration-glow-clip/quickstart.md`

---

## Dependencies & Execution Order

### Phase Dependencies

- **Phase 3 (US1)**: No prerequisites — single file change
- **Phase 4 (US2)**: Depends on T001 completion (verifies T001 doesn't regress)
- **Phase 5 (Polish)**: Depends on T001 and T002 completion

### User Story Dependencies

- **User Story 1 (P1)**: Independent — core fix
- **User Story 2 (P1)**: Depends on US1 — verification of no side effects

### Within Each User Story

- US1: Single task (T001)
- US2: Single verification task (T002) dependent on T001

### Parallel Opportunities

- No parallel opportunities — this is a 1-file, 1-line fix with sequential verification

---

## Implementation Strategy

### MVP First (User Story 1 Only)

1. Complete T001: Add padding to inner container
2. **STOP and VALIDATE**: Visually verify glow is no longer clipped
3. Complete T002: Verify no layout side effects
4. Complete T003-T004: Quality gates and quickstart validation

### Incremental Delivery

1. T001 → Glow fix applied
2. T002 → No regressions confirmed
3. T003-T004 → Quality gates pass, ready to merge

---

## Notes

- This is a minimal CSS-only fix: one Tailwind class addition to one file
- The root cause is CSS spec behavior: `overflow-y: auto` forces `overflow-x: auto`, clipping `box-shadow`
- `box-shadow` is paint-only and does not affect layout, so padding accommodates the glow without shifting content
- If `px-2` (8px) is insufficient for the 6px glow spread, increase to `px-3` (12px)