initiative/specs/033-fix-concentration-glow-clip/research.md

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:

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.