59 lines
2.3 KiB
Markdown
59 lines
2.3 KiB
Markdown
---
|
|
# nuzlocke-tracker-lkro
|
|
title: 'UX: Make team section a floating sidebar on desktop'
|
|
status: completed
|
|
type: feature
|
|
priority: normal
|
|
created_at: 2026-03-21T21:50:48Z
|
|
updated_at: 2026-03-22T09:11:58Z
|
|
---
|
|
|
|
## Problem
|
|
|
|
During a run, the team section is rendered inline at the top of the encounters page. When scrolling through routes and bosses, the team disappears and users must scroll back up to evolve pokemon or check their team. This creates constant friction during gameplay.
|
|
|
|
## Current Implementation
|
|
|
|
- Team section rendered in `RunEncounters.tsx:1214-1288`
|
|
- Inline in the page flow, above the encounters list
|
|
- No sticky/floating behavior
|
|
|
|
## Proposed Solution
|
|
|
|
Make the team section a sticky sidebar on desktop viewports (2-column layout):
|
|
- **Desktop (lg breakpoint, ≥1024px — Tailwind v4 default):** Encounters on the left, team pinned in a right sidebar that scrolls with the page
|
|
- **Mobile:** Keep current stacked layout (team above encounters)
|
|
|
|
Alternative: A floating action button (FAB) that opens the team in a slide-over panel.
|
|
|
|
## Checklist
|
|
|
|
- [x] Add responsive 2-column layout to RunEncounters page (desktop only)
|
|
- [x] Move team section into a sticky sidebar column
|
|
- [x] Ensure sidebar scrolls independently if team is taller than viewport
|
|
- [x] Keep current stacked layout on mobile/tablet
|
|
- [x] Test with various team sizes (0-6 pokemon)
|
|
- [x] Test evolution/nickname editing still works from sidebar
|
|
|
|
## Summary of Changes
|
|
|
|
Implemented a responsive 2-column layout for the RunEncounters page:
|
|
|
|
**Desktop (lg, ≥1024px):**
|
|
- Encounters list on the left in a flex column
|
|
- Team section in a 256px sticky sidebar on the right
|
|
- Sidebar stays visible while scrolling through routes and bosses
|
|
- Independent scrolling for sidebar when team is taller than viewport (max-h-[calc(100vh-6rem)] overflow-y-auto)
|
|
- 2-column grid for pokemon cards in sidebar
|
|
|
|
**Mobile/Tablet (<1024px):**
|
|
- Original stacked layout preserved (team above encounters)
|
|
- Collapsible team section with expand/collapse toggle
|
|
|
|
**Technical changes:**
|
|
- Page container widened from max-w-4xl to lg:max-w-6xl
|
|
- Added lg:flex lg:gap-6 wrapper for 2-column layout
|
|
- Mobile team section hidden on lg with lg:hidden
|
|
- Desktop sidebar hidden below lg with hidden lg:block
|
|
- Sidebar styled with bg-surface-1 border and rounded corners
|