fix top bar small screens #1377
Conversation
WalkthroughThe main container in the Changes
Possibly related PRs
Suggested labels
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-project-automation
bot
moved this from Triage
to Complete
in OpenFront Release Management
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/client/graphics/layers/GameTopBar.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: andrewNiziolek
PR: openfrontio/OpenFrontIO#1007
File: resources/lang/de.json:115-115
Timestamp: 2025-06-02T14:27:37.609Z
Learning: For OpenFrontIO project: When localization keys are renamed in language JSON files, the maintainers separate technical changes from translation content updates. They wait for community translators to update the actual translation values rather than attempting to translate in the same PR. This allows technical changes to proceed while ensuring accurate translations from native speakers.
Learnt from: VariableVince
PR: openfrontio/OpenFrontIO#1110
File: src/client/Main.ts:293-295
Timestamp: 2025-06-09T02:20:43.637Z
Learning: In src/client/Main.ts, during game start in the handleJoinLobby callback, UI elements are hidden using direct DOM manipulation with classList.add("hidden") for consistency. This includes modals, buttons, and error divs. The codebase follows this pattern rather than using component APIs for hiding elements during game transitions.
src/client/graphics/layers/GameTopBar.ts (1)
Learnt from: VariableVince
PR: openfrontio/OpenFrontIO#1110
File: src/client/Main.ts:293-295
Timestamp: 2025-06-09T02:20:43.637Z
Learning: In src/client/Main.ts, during game start in the handleJoinLobby callback, UI elements are hidden using direct DOM manipulation with classList.add("hidden") for consistency. This includes modals, buttons, and error divs. The codebase follows this pattern rather than using component APIs for hiding elements during game transitions.
| return html` | ||
| <div | ||
| class="absolute top-4 left-1/2 transform -translate-x-1/2 flex justify-center items-center p-1 md:px-1.5 lg:px-4 z-[1100]" | ||
| class="fixed top-4 left-1/2 transform -translate-x-1/2 flex justify-center items-center p-1 md:px-1.5 lg:px-4 z-[1100]" | ||
| > |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Ensure consistent positioning for replay view (isAlt)
The default branch now uses fixed positioning (👍 for small-screen stability), but the replay branch above (lines 66-70) is still absolute. That difference will re-introduce the original scrolling bug whenever isAlt === true.
- class="absolute top-4 left-1/2 transform -translate-x-1/2 flex justify-center items-center p-2"
+ class="fixed top-4 left-1/2 transform -translate-x-1/2 flex justify-center items-center p-2"Matching both branches keeps behaviour predictable and avoids a second special-case tweak later.
🤖 Prompt for AI Agents
In src/client/graphics/layers/GameTopBar.ts around lines 66 to 83, the replay
view branch (lines 66-70) uses absolute positioning while the default branch
(lines 80-83) uses fixed positioning. To ensure consistent positioning and avoid
scrolling bugs when isAlt is true, change the replay view's container from
absolute to fixed positioning to match the default branch.
Description:
Changed top by from absolute => fixed position to fix issue where topbar was not rendered on small screens.
Please complete the following:
Please put your Discord username so you can be contacted if a bug or regression is found:
evan