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>
21 lines
1.1 KiB
Markdown
21 lines
1.1 KiB
Markdown
# 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
|