diff --git a/.beans/nuzlocke-tracker-lkro--ux-make-team-section-a-floating-sidebar-on-desktop.md b/.beans/nuzlocke-tracker-lkro--ux-make-team-section-a-floating-sidebar-on-desktop.md index d1ede42..bea0547 100644 --- a/.beans/nuzlocke-tracker-lkro--ux-make-team-section-a-floating-sidebar-on-desktop.md +++ b/.beans/nuzlocke-tracker-lkro--ux-make-team-section-a-floating-sidebar-on-desktop.md @@ -1,11 +1,11 @@ --- # nuzlocke-tracker-lkro title: 'UX: Make team section a floating sidebar on desktop' -status: todo +status: in-progress type: feature priority: normal created_at: 2026-03-21T21:50:48Z -updated_at: 2026-03-22T08:08:13Z +updated_at: 2026-03-22T09:10:47Z --- ## Problem @@ -28,9 +28,9 @@ Alternative: A floating action button (FAB) that opens the team in a slide-over ## Checklist -- [ ] Add responsive 2-column layout to RunEncounters page (desktop only) -- [ ] Move team section into a sticky sidebar column -- [ ] Ensure sidebar scrolls independently if team is taller than viewport -- [ ] Keep current stacked layout on mobile/tablet +- [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 - [ ] Test with various team sizes (0-6 pokemon) - [ ] Test evolution/nickname editing still works from sidebar diff --git a/frontend/src/pages/RunEncounters.tsx b/frontend/src/pages/RunEncounters.tsx index 751943f..762fba5 100644 --- a/frontend/src/pages/RunEncounters.tsx +++ b/frontend/src/pages/RunEncounters.tsx @@ -922,7 +922,7 @@ export function RunEncounters() { }) return ( -
+
{/* Header */}
- {/* Team Section */} +
+ {/* Main content column */} +
+ {/* Team Section - Mobile/Tablet only */} {(alive.length > 0 || dead.length > 0) && ( -
+
+ + {/* Team Sidebar - Desktop only */} + {(alive.length > 0 || dead.length > 0) && ( +
+
+
+
+

+ {isActive ? 'Team' : 'Final Team'} +

+ + {alive.length}/{alive.length + dead.length} + +
+ {alive.length > 1 && ( + + )} + {alive.length > 0 && ( +
+ {alive.map((enc) => ( + setSelectedTeamEncounter(enc) : undefined + } + /> + ))} +
+ )} + {dead.length > 0 && ( + <> +

Graveyard

+
+ {dead.map((enc) => ( + setSelectedTeamEncounter(enc) : undefined + } + /> + ))} +
+ + )} +
+
+
+ )} +
{/* Encounter Modal */} {selectedRoute && (