# Research: Fix Concentration Glow Clipping

## Root Cause Analysis

### Decision: The glow is clipped by the scrollable parent container's implicit overflow-x

**Rationale**: The combatant list is wrapped in a `<div className="flex-1 overflow-y-auto min-h-0">` (App.tsx:157). Per the CSS specification, when one overflow axis is set to a non-`visible` value (here `overflow-y: auto`), the other axis (`overflow-x`) computes to `auto` rather than remaining `visible`. This creates a clipping context that cuts off the `box-shadow` from the `concentration-glow` animation on the left and right edges.

The glow is defined as:
```css
box-shadow: 0 0 4px 2px #c084fc;
```
This extends ~6px outward from the combatant row element. The parent's implicit `overflow-x: auto` clips this outward extension.

**Alternatives considered**:
- `border-radius` on the row causing clipping — rejected; `border-radius` shapes `box-shadow` but does not clip it
- `translate` in the shake animation pushing the element off-screen — rejected; max displacement is only 3px and returns to 0

## Fix Strategy

### Decision: Add horizontal padding to the scrollable container to accommodate the glow spread

**Rationale**: The simplest fix is to add left/right padding to the scrollable container (or its inner flex-col child) so the `box-shadow` has room to render within the overflow area without being clipped. This avoids changing the overflow behavior (which is needed for vertical scrolling) and avoids restructuring the component hierarchy.

The glow spread is `4px blur + 2px spread = ~6px` outward. Adding `px-2` (8px) padding to the inner `<div className="flex flex-col pb-2">` at App.tsx:158 would provide enough space.

**Alternatives considered**:
1. **Change `overflow-y-auto` to `overflow-y-scroll` + `overflow-x-visible`** — rejected; CSS spec still forces `overflow-x` to `auto` when `overflow-y` is non-`visible`
2. **Use `outline` instead of `box-shadow`** — viable but changes the visual appearance; `outline` doesn't respect `border-radius` in all browsers
3. **Use `inset box-shadow`** — would avoid overflow clipping but changes the visual effect from an outer glow to an inner glow
4. **Negative margin + padding trick on the scrollable container** — more complex, same net effect as simple padding

### Decision: Verify no horizontal scrollbar is introduced

**Rationale**: Adding padding to the inner container should not cause a horizontal scrollbar since the content still fits within the parent. The `box-shadow` renders in the padding area but does not affect layout (box-shadow is a paint-only effect, not a layout-affecting property). No additional `overflow-x: hidden` should be needed.