initiative/specs/033-fix-concentration-glow-clip/tasks.md

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

• 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

• 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.

• T003 Run pnpm check to ensure all quality gates pass (lint, typecheck, tests, coverage)
• 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)