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

20
specs/033-fix-concentration-glow-clip/quickstart.md Normal file
View File

@@ -0,0 +1,20 @@
# Quickstart: Fix Concentration Glow Clipping
## What Changed
The scrollable combatant list container clips the `box-shadow` glow effect from the concentration-damage animation. The fix adds horizontal padding to the inner container so the glow has room to render.
## Files to Modify
1. **`apps/web/src/App.tsx`** — Add horizontal padding to the inner `<div>` inside the scrollable combatant list area (line ~158)
## How to Verify
1. Run `pnpm --filter web dev`
2. Add a combatant to an encounter
3. Toggle concentration on the combatant
4. Reduce the combatant's HP (deal damage)
5. Observe the purple glow animation — it should be fully visible on left and right edges
6. Test at mobile widths (320px+) — no horizontal scrollbar should appear
7. Add multiple concentrating combatants, deal damage to all simultaneously — each row's glow should be independently visible without overlap artifacts
8. With a long encounter list (6+ combatants), scroll so a concentrating combatant is at the top or bottom edge of the visible area, deal damage — glow should still be fully visible