66 lines
4.4 KiB
Markdown
66 lines
4.4 KiB
Markdown
# Feature Specification: Fix HP Popover Overflow
|
|
|
|
**Feature Branch**: `024-fix-hp-popover-overflow`
|
|
**Created**: 2026-03-09
|
|
**Status**: Draft
|
|
**Input**: User description: "When I try to apply a delta to health of a combatant, I do not see the whole popover. It vanishes out of view to the right. Also a scrollbar appears to the bottom. Expected behaviour would be that the whole popover menu is visible and no scrollbar appears."
|
|
|
|
## User Scenarios & Testing *(mandatory)*
|
|
|
|
### User Story 1 - HP popover stays fully visible (Priority: P1)
|
|
|
|
When a user clicks the HP display on a combatant row to open the HP adjustment popover, the popover must be fully visible within the viewport regardless of where the combatant row is positioned horizontally. Currently the popover overflows to the right, getting clipped by the viewport edge and causing a horizontal scrollbar.
|
|
|
|
**Why this priority**: This is the core bug — the popover is unusable when it extends beyond the viewport edge.
|
|
|
|
**Independent Test**: Open the HP adjustment popover for any combatant and verify the entire popover (input field, damage button, healing button) is visible without scrolling.
|
|
|
|
**Acceptance Scenarios**:
|
|
|
|
1. **Given** a combatant row where the HP display is near the right edge of the viewport, **When** the user clicks the HP value to open the adjustment popover, **Then** the popover is fully visible within the viewport with no part clipped or hidden.
|
|
2. **Given** the HP adjustment popover is open, **When** the user looks at the page, **Then** no horizontal scrollbar appears on the page or any scrollable container.
|
|
3. **Given** a combatant row where the HP display has plenty of space to the right, **When** the user clicks the HP value, **Then** the popover opens in its natural position (no unnecessary repositioning).
|
|
|
|
---
|
|
|
|
### User Story 2 - Popover remains usable with stat block panel open (Priority: P2)
|
|
|
|
The HP popover must remain fully visible and functional when the stat block side panel is open, which reduces the available width for the encounter tracker.
|
|
|
|
**Why this priority**: The stat block panel narrows the main content area, making the overflow more likely.
|
|
|
|
**Independent Test**: Open the stat block panel, then open the HP popover for a combatant and verify it is fully visible.
|
|
|
|
**Acceptance Scenarios**:
|
|
|
|
1. **Given** the stat block side panel is open (reducing the encounter tracker width), **When** the user opens the HP adjustment popover, **Then** the popover is fully visible within the available space.
|
|
2. **Given** a narrow viewport (e.g., mobile width), **When** the user opens the HP adjustment popover, **Then** the popover is fully visible and usable.
|
|
|
|
### Edge Cases
|
|
|
|
- What happens when the viewport is extremely narrow (narrower than the popover width)? The popover should still not cause a horizontal scrollbar; it should align to stay within bounds as much as possible.
|
|
- What happens when the browser window is resized while the popover is open? The popover should not overflow. Closing the popover on resize is acceptable.
|
|
|
|
## Requirements *(mandatory)*
|
|
|
|
### Functional Requirements
|
|
|
|
- **FR-001**: The HP adjustment popover MUST be fully visible within the viewport when opened, regardless of the horizontal position of the triggering element.
|
|
- **FR-002**: Opening the HP adjustment popover MUST NOT cause a horizontal scrollbar to appear on the page or any scrollable ancestor container.
|
|
- **FR-003**: The popover MUST remain fully functional (input field, damage button, healing button all accessible and interactive) in its adjusted position.
|
|
- **FR-004**: The popover SHOULD open in its natural/default position when there is sufficient space, only adjusting when it would otherwise overflow.
|
|
|
|
## Success Criteria *(mandatory)*
|
|
|
|
### Measurable Outcomes
|
|
|
|
- **SC-001**: The HP adjustment popover is 100% visible within the viewport for all combatant rows, regardless of horizontal position.
|
|
- **SC-002**: No horizontal scrollbar appears when the HP adjustment popover is open.
|
|
- **SC-003**: All popover controls (input, damage button, healing button) remain interactive in the adjusted position.
|
|
|
|
## Assumptions
|
|
|
|
- The popover's own width is small enough to fit within the viewport at all supported screen sizes.
|
|
- The fix should use lightweight viewport-aware positioning — no heavy positioning library is needed for a popover of this size.
|
|
- The existing click-outside-to-close and keyboard interactions remain unchanged.
|