dostulata/initiative
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix concentration glow clipping at container edges

Browse Source 
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>
This commit is contained in:
Lukas
2026-03-11 11:54:22 +01:00
parent 0c903bc9a5
commit 55d322a727
9 changed files with 348 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
specs/033-fix-concentration-glow-clip/plan.md Normal file
View File

@@ -0,0 +1,69 @@
# 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.