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>
116 lines
4.2 KiB
Markdown
116 lines
4.2 KiB
Markdown
# Tasks: Fix Concentration Shake Glow Clipping
|
|
|
|
**Input**: Design documents from `/specs/033-fix-concentration-glow-clip/`
|
|
**Prerequisites**: plan.md (required), spec.md (required for user stories), research.md, data-model.md, quickstart.md
|
|
|
|
**Tests**: No test tasks — this is a CSS-only visual fix. Verification is done via manual inspection per quickstart.md.
|
|
|
|
**Organization**: Tasks are grouped by user story to enable independent implementation and testing of each story.
|
|
|
|
## Format: `[ID] [P?] [Story] Description`
|
|
|
|
- **[P]**: Can run in parallel (different files, no dependencies)
|
|
- **[Story]**: Which user story this task belongs to (e.g., US1, US2)
|
|
- Include exact file paths in descriptions
|
|
|
|
## Phase 1: Setup
|
|
|
|
**Purpose**: No setup needed — existing project, no new dependencies or configuration changes.
|
|
|
|
*(No tasks in this phase)*
|
|
|
|
---
|
|
|
|
## Phase 2: Foundational (Blocking Prerequisites)
|
|
|
|
**Purpose**: No foundational work needed — the fix modifies existing CSS layout only.
|
|
|
|
*(No tasks in this phase)*
|
|
|
|
---
|
|
|
|
## Phase 3: User Story 1 - Concentration Damage Glow Visible (Priority: P1) MVP
|
|
|
|
**Goal**: The concentration-damage glow effect is fully visible on both left and right edges without clipping.
|
|
|
|
**Independent Test**: Deal damage to a concentrating creature and verify the purple glow extends fully on all sides without being cut off at container edges.
|
|
|
|
### Implementation for User Story 1
|
|
|
|
- [x] T001 [US1] Add horizontal padding (`px-2`) to the inner combatant list container `<div className="flex flex-col pb-2">` in `apps/web/src/App.tsx` (line ~158) so the `box-shadow` glow renders within the overflow area instead of being clipped
|
|
|
|
**Checkpoint**: At this point, the glow should be fully visible on left and right edges.
|
|
|
|
---
|
|
|
|
## Phase 4: User Story 2 - No Layout Side Effects (Priority: P1)
|
|
|
|
**Goal**: The padding fix does not introduce horizontal scrollbars, layout shifts, or visual artifacts.
|
|
|
|
**Independent Test**: Trigger the animation at desktop and mobile widths (320px+), confirm no horizontal scrollbar appears and no elements shift position.
|
|
|
|
### Implementation for User Story 2
|
|
|
|
- [x] T002 [US2] Verify at desktop and mobile viewports (320px+) that the padding added in T001 does not cause a horizontal scrollbar or layout shift in `apps/web/src/App.tsx`; also verify that multiple concentrating rows animating simultaneously display independent glows without overlap artifacts; adjust padding value if needed
|
|
|
|
**Checkpoint**: Animation renders correctly at all viewport widths with no side effects.
|
|
|
|
---
|
|
|
|
## Phase 5: Polish & Cross-Cutting Concerns
|
|
|
|
**Purpose**: Final validation and quality gates.
|
|
|
|
- [x] T003 Run `pnpm check` to ensure all quality gates pass (lint, typecheck, tests, coverage)
|
|
- [x] T004 Run quickstart.md validation steps from `specs/033-fix-concentration-glow-clip/quickstart.md`
|
|
|
|
---
|
|
|
|
## Dependencies & Execution Order
|
|
|
|
### Phase Dependencies
|
|
|
|
- **Phase 3 (US1)**: No prerequisites — single file change
|
|
- **Phase 4 (US2)**: Depends on T001 completion (verifies T001 doesn't regress)
|
|
- **Phase 5 (Polish)**: Depends on T001 and T002 completion
|
|
|
|
### User Story Dependencies
|
|
|
|
- **User Story 1 (P1)**: Independent — core fix
|
|
- **User Story 2 (P1)**: Depends on US1 — verification of no side effects
|
|
|
|
### Within Each User Story
|
|
|
|
- US1: Single task (T001)
|
|
- US2: Single verification task (T002) dependent on T001
|
|
|
|
### Parallel Opportunities
|
|
|
|
- No parallel opportunities — this is a 1-file, 1-line fix with sequential verification
|
|
|
|
---
|
|
|
|
## Implementation Strategy
|
|
|
|
### MVP First (User Story 1 Only)
|
|
|
|
1. Complete T001: Add padding to inner container
|
|
2. **STOP and VALIDATE**: Visually verify glow is no longer clipped
|
|
3. Complete T002: Verify no layout side effects
|
|
4. Complete T003-T004: Quality gates and quickstart validation
|
|
|
|
### Incremental Delivery
|
|
|
|
1. T001 → Glow fix applied
|
|
2. T002 → No regressions confirmed
|
|
3. T003-T004 → Quality gates pass, ready to merge
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- This is a minimal CSS-only fix: one Tailwind class addition to one file
|
|
- The root cause is CSS spec behavior: `overflow-y: auto` forces `overflow-x: auto`, clipping `box-shadow`
|
|
- `box-shadow` is paint-only and does not affect layout, so padding accommodates the glow without shifting content
|
|
- If `px-2` (8px) is insufficient for the 6px glow spread, increase to `px-3` (12px)
|