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>
69 lines
4.2 KiB
Markdown
69 lines
4.2 KiB
Markdown
# Feature Specification: Fix Concentration Shake Glow Clipping
|
|
|
|
**Feature Branch**: `033-fix-concentration-glow-clip`
|
|
**Created**: 2026-03-11
|
|
**Status**: Draft
|
|
**Input**: User description: "Fix concentration shake glow clipped at container edges"
|
|
|
|
## User Scenarios & Testing *(mandatory)*
|
|
|
|
### User Story 1 - Concentration Damage Glow Visible (Priority: P1)
|
|
|
|
As a game master viewing the encounter tracker, when a concentrating creature takes damage and the shake + glow animation plays, I see the full glow effect without any visual clipping on the left or right edges.
|
|
|
|
**Why this priority**: This is the core bug being fixed. The glow animation is the primary visual feedback for concentration damage events, and clipping undermines its purpose.
|
|
|
|
**Independent Test**: Can be tested by dealing damage to a concentrating creature and visually verifying the glow extends fully without being cut off at container boundaries.
|
|
|
|
**Acceptance Scenarios**:
|
|
|
|
1. **Given** a creature is concentrating on a spell, **When** the creature takes damage and the shake + glow animation triggers, **Then** the glow effect is fully visible on both the left and right sides throughout the entire animation duration
|
|
2. **Given** a creature is concentrating and the encounter list has its default layout, **When** damage triggers the animation, **Then** no part of the glow is clipped or hidden by overflow constraints
|
|
|
|
---
|
|
|
|
### User Story 2 - No Layout Side Effects (Priority: P1)
|
|
|
|
As a user on any device, the glow fix does not introduce horizontal scrollbars, layout shifts, or visual artifacts outside the animation area.
|
|
|
|
**Why this priority**: A fix that trades one visual bug for another (e.g., scroll jank) would be a regression. This is equally critical as the glow fix itself.
|
|
|
|
**Independent Test**: Can be tested by triggering the animation repeatedly on both desktop and mobile viewports and confirming no horizontal scrollbar appears and no elements shift position.
|
|
|
|
**Acceptance Scenarios**:
|
|
|
|
1. **Given** the encounter tracker is displayed at desktop width, **When** the shake + glow animation plays, **Then** no horizontal scrollbar appears on the page or encounter container
|
|
2. **Given** the encounter tracker is displayed at mobile width (320px - 480px), **When** the shake + glow animation plays, **Then** no layout shift occurs and the animation renders correctly within the viewport
|
|
|
|
---
|
|
|
|
### Edge Cases
|
|
|
|
- What happens when multiple concentrating creatures take damage simultaneously? The glow on each row must remain independently visible without overlap artifacts.
|
|
- What happens when the creature row is at the very top or bottom of a scrollable encounter list? The glow must still be fully visible.
|
|
- What happens on very narrow viewports (below 320px)? The glow should degrade gracefully without causing overflow.
|
|
|
|
## Requirements *(mandatory)*
|
|
|
|
### Functional Requirements
|
|
|
|
- **FR-001**: The concentration damage glow effect MUST be fully visible on both left and right edges of the combatant row throughout the shake animation
|
|
- **FR-002**: The glow fix MUST NOT introduce a horizontal scrollbar on the page or any parent container
|
|
- **FR-003**: The glow fix MUST NOT cause any layout shift or repositioning of other elements during or after the animation
|
|
- **FR-004**: The shake + glow animation MUST render correctly on mobile-width screens (320px and above)
|
|
- **FR-005**: The glow effect MUST remain visually correct when multiple combatant rows animate simultaneously
|
|
|
|
## Success Criteria *(mandatory)*
|
|
|
|
### Measurable Outcomes
|
|
|
|
- **SC-001**: The glow effect is visually complete (no clipping) on 100% of concentration damage events across all supported viewport widths (320px and above)
|
|
- **SC-002**: Zero horizontal scrollbar appearances caused by the glow animation at any viewport width
|
|
- **SC-003**: Zero measurable layout shift (CLS = 0) introduced by the animation fix
|
|
|
|
## Assumptions
|
|
|
|
- The existing shake animation behavior and timing are correct and should be preserved; only the glow clipping needs to be fixed.
|
|
- The glow effect uses CSS techniques (e.g., box-shadow, outline, or pseudo-elements) that may be clipped by `overflow: hidden` or similar properties on ancestor containers.
|
|
- "Mobile-width screens" refers to viewports of 320px width and above, consistent with standard mobile device support.
|