ux: desktop multi-column dashboard — use the horizontal space (#54)#56
Merged
Conversation
#54) On desktop the layout wasted the screen's width: .game-layout was a single flex column at every size, so the 800x600 map sat centered with every panel stacked below it and the left/right thirds left empty — forcing the player to scroll to read stats or manage armies while watching the map. The docs even described "right-side" panels that the single-column layout never actually provided. This splits the layout into a map column (controls, canvas, the selected-army panel) and a sidebar column (Status, Armies, Policy, Settings). They stack as before on narrow/mobile widths; at >=1200px they sit side by side and the container widens, so the map and the key panels are visible together without scrolling. Panel order is now driven by CSS `order` in the sidebar (Status, Armies, Policy, Settings) for both layouts, replacing the old mobile-only direct-child order rules, which also fixes the selected-army panel sitting above the controls on mobile. Closes #54 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #54. On desktop the screen's width was wasted:
.game-layoutwas a single flex column at every width, so the 800×600 map sat centered with every panel (Status, Policy, Settings, Armies) stacked below it and the left/right thirds left empty — you had to scroll to read stats or manage armies while the map was up top. (The docs even described "right-side" panels that the single-column layout never provided.)Change
The layout is split into two columns:
.game-main— controls, the map canvas, and the selected-army split panel..game-sidebar— Game Status & Stats, Armies, Change Policy, Settings.They stack as before on narrow/mobile widths; at ≥ 1200px they sit side by side and the container widens (max-width 1340px), so the map and the key panels are visible together without scrolling. Panel order is now handled by CSS
orderin the sidebar (Status, Armies, Policy, Settings) for both layouts, replacing the old mobile-only direct-childorderrules — which also fixes the selected-army panel previously rendering above the controls on mobile.No JS changes (elements are still addressed by id); the "open all sections on desktop" behavior is unchanged.
Test plan
Related: #55 (make this dashboard configurable/persisted per account).
🤖 Generated with Claude Code