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>
36 lines
2.6 KiB
Markdown
36 lines
2.6 KiB
Markdown
# 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.
|