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>
1.1 KiB
1.1 KiB
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
apps/web/src/App.tsx— Add horizontal padding to the inner<div>inside the scrollable combatant list area (line ~158)
How to Verify
- Run
pnpm --filter web dev - Add a combatant to an encounter
- Toggle concentration on the combatant
- Reduce the combatant's HP (deal damage)
- Observe the purple glow animation — it should be fully visible on left and right edges
- Test at mobile widths (320px+) — no horizontal scrollbar should appear
- Add multiple concentrating combatants, deal damage to all simultaneously — each row's glow should be independently visible without overlap artifacts
- 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