# Implementation Plan: Fix Concentration Shake Glow Clipping

**Branch**: `033-fix-concentration-glow-clip` | **Date**: 2026-03-11 | **Spec**: [spec.md](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)

```text
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)

```text
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.