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

Implementation Plan: Fix Concentration Shake Glow Clipping

Branch: 033-fix-concentration-glow-clip | Date: 2026-03-11 | Spec: spec.md Input: Feature specification from /specs/033-fix-concentration-glow-clip/spec.md

Summary

The concentration-damage glow animation (box-shadow) is clipped on left and right edges because the scrollable combatant list container's overflow-y: auto implicitly sets overflow-x: auto per CSS spec, creating a clipping context. The fix adds horizontal padding to the inner container so the glow has room to render within the overflow area.

Technical Context

Language/Version: TypeScript 5.8, CSS (Tailwind CSS v4) Primary Dependencies: React 19, Tailwind CSS v4 Storage: N/A (no persistence changes) Testing: Vitest (visual verification — CSS-only fix) Target Platform: Web (modern browsers, 320px+ viewports) Project Type: Web application Performance Goals: 60fps animation, zero layout shift Constraints: No horizontal scrollbar, no layout shift, mobile-compatible Scale/Scope: Single CSS class change in one file

Constitution Check

GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.

Principle	Status	Notes
I. Deterministic Domain Core	PASS	No domain changes
II. Layered Architecture	PASS	Change is in adapter layer (web/UI) only
III. Clarification-First	PASS	Root cause is clear, fix is straightforward
IV. Escalation Gates	PASS	Fix matches spec scope exactly
V. MVP Baseline Language	PASS	N/A for bug fix
VI. No Gameplay Rules	PASS	N/A — visual fix only

Post-design re-check: All gates still pass. No architectural changes introduced.

Root Cause

1. The combatant list lives inside <div className="flex-1 overflow-y-auto min-h-0"> (App.tsx:157)
2. CSS spec: when overflow-y is non-visible, overflow-x computes to auto (not visible)
3. The concentration-glow animation applies box-shadow: 0 0 4px 2px #c084fc (~6px outward spread)
4. The implicit overflow-x: auto clips this box-shadow on left and right edges

Fix Approach

Add horizontal padding (px-2, 8px) to the inner <div className="flex flex-col pb-2"> at App.tsx:158. This gives the box-shadow room to render within the container's content area, avoiding clipping. box-shadow is paint-only and does not affect layout, so no scrollbar or shift will result.

Project Structure

Documentation (this feature)

specs/033-fix-concentration-glow-clip/
├── spec.md
├── plan.md              # This file
├── research.md          # Root cause analysis and fix strategy
├── data-model.md        # No data model changes
├── quickstart.md        # Verification steps
└── tasks.md             # Task breakdown (generated by /speckit.tasks)

Source Code (affected files)

apps/web/src/
└── App.tsx              # Line ~158: add px-2 to inner combatant list container

Structure Decision: Existing monorepo structure. Only one file in the adapter layer (apps/web) is modified. No new files, no structural changes.