55d322a727
Add padding to the inner combatant list container so the box-shadow glow from the concentration-damage animation renders fully on all sides, preventing clipping by the scrollable parent's implicit overflow-x. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
70 lines
3.1 KiB
Markdown
70 lines
3.1 KiB
Markdown
# 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.
|