34 lines
2.8 KiB
Markdown
34 lines
2.8 KiB
Markdown
# Research: Fixed Layout Bars
|
|
|
|
## R-001: Layout Strategy — Flexbox vs Fixed Positioning
|
|
|
|
**Decision**: Use CSS flexbox with `flex-shrink-0` on fixed bars and `flex-1 overflow-y-auto` on the scrollable middle section.
|
|
|
|
**Rationale**: The current layout already uses a flex column (`flex flex-col`) inside a `h-screen` container. Converting from a single scrollable page to a three-zone layout (fixed top, scrollable middle, fixed bottom) requires only removing `overflow-y-auto` from the root and adding it to the combatant list wrapper. This avoids `position: fixed` which would require manual offset calculations and could conflict with the existing StatBlockPanel fixed positioning.
|
|
|
|
**Alternatives considered**:
|
|
- `position: sticky` on top/bottom bars: Would require the scroll container to be the viewport, and `sticky` bottom is unreliable across browsers.
|
|
- `position: fixed` on both bars with padding offsets: More complex, requires measuring bar heights to offset content, and creates z-index/stacking context issues with the StatBlockPanel.
|
|
|
|
## R-002: Autocomplete Dropdown Behavior
|
|
|
|
**Decision**: The ActionBar suggestion dropdown (already `z-50`, `absolute`, `bottom-full`) will render upward from the fixed bottom bar. Since the dropdown uses absolute positioning within the ActionBar's relative container, it will naturally overlay the scrollable combatant list above it.
|
|
|
|
**Rationale**: The dropdown already positions itself above the input with `bottom-full`. With the ActionBar fixed at the bottom, the dropdown will appear overlaying the combatant list, which is the expected behavior. The `z-50` ensures it renders above combatant rows. No changes needed to the dropdown positioning.
|
|
|
|
**Alternatives considered**: Portal-based rendering — unnecessary complexity given current positioning already works.
|
|
|
|
## R-003: "Initiative Tracker" Heading Placement
|
|
|
|
**Decision**: The heading scrolls away with the combatant list (placed inside the scrollable area) or is removed from the visible area. Per the spec assumption, only the turn navigation bar and add-creature bar need to be fixed.
|
|
|
|
**Rationale**: Keeping the heading fixed would consume additional vertical space on small viewports. The heading is not a frequently-needed control.
|
|
|
|
**Alternatives considered**: Including heading in the fixed top area — rejected to maximize combatant list space.
|
|
|
|
## R-004: StatBlockPanel Interaction
|
|
|
|
**Decision**: No changes to StatBlockPanel. It uses `fixed top-0 right-0 bottom-0` on desktop and renders as a sibling outside the main content wrapper. The main content area already uses `max-w-2xl` which leaves room for the 400px panel.
|
|
|
|
**Rationale**: StatBlockPanel is positioned independently of the main content flow and will not be affected by changing the inner layout from single-scroll to flex zones.
|