From aee28cd7a19f30ea4fae8af1e1fc0d5eebd7f9a1 Mon Sep 17 00:00:00 2001 From: Julian Tabel Date: Sun, 22 Mar 2026 10:12:02 +0100 Subject: [PATCH] chore: mark bean nuzlocke-tracker-lkro as completed Co-Authored-By: Claude Opus 4.6 --- ...m-section-a-floating-sidebar-on-desktop.md | 30 ++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) 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 bea0547..b04aacf 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: in-progress +status: completed type: feature priority: normal created_at: 2026-03-21T21:50:48Z -updated_at: 2026-03-22T09:10:47Z +updated_at: 2026-03-22T09:11:58Z --- ## Problem @@ -32,5 +32,27 @@ Alternative: A floating action button (FAB) that opens the team in a slide-over - [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 +- [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