# [Enhancement] Reposition misplaced UI containers for better visibility in WASM Voxel Game #284

New Issue

2026-06-28T16:26:29Z

enjin2310 commented

2026-06-28 16:26:29 +00:00

Summary

In the WASM Voxel Game, several UI containers (such as Game Mode and Block Editor) appear misplaced over the top navigation bar and near the bottom-left corner. This layout interferes with visibility and usability, especially when interacting with the game menu or switching modes.

Issue Description

The Game Mode and Block Editor buttons overlap the top navigation bar, while other UI elements near the bottom-left corner partially cover the version indicator. This misplacement affects clarity and accessibility, making the interface feel cluttered and less polished.

Observed Behavior

Game Mode and Block Editor buttons overlap the navbar.
Bottom-left corner elements (e.g., version text) are partially covered.
The layout feels inconsistent across different screen sizes.

Expected Behavior

UI containers should be properly aligned and spaced:

Top controls should appear below the navbar, not overlapping it.
Bottom indicators should remain fully visible and unobstructed.
Layout should adapt responsively to different resolutions.

Environment

Property	Value
Application	SpikerSoft Learning Platform
Module	WASM Voxel Game
Environment	Production
Browser	Firefox
Operating System	Windows 11
Version	v2026.06.28c
Device	Desktop PC

Steps to Reproduce

Navigate to learn.spikersoft.com/wasm-voxel-game.
Observe the Game Mode and Block Editor containers at the top-left corner.
Note that they overlap the navbar.
Check the bottom-left corner for overlapping elements.

Expected Result

UI containers should be repositioned for better visibility and user experience.

Actual Result

Containers overlap with the navbar and other elements, reducing clarity and usability.

Evidence

Screenshot shows Game Mode and Block Editor buttons placed over the navbar.
Bottom-left corner elements partially overlap the version indicator.

Impact

Reduces visual clarity and professional appearance.
May cause accidental clicks on overlapping elements.
Affects overall quality of life (QoL) for users navigating or testing the game.

Frequency

Always

Reproducibility

100%

Severity

Low

Notes

Repositioning these containers slightly below the navbar and adjusting margins for bottom elements would improve usability and visual consistency across all screen sizes.

## Summary In the **WASM Voxel Game**, several UI containers (such as **Game Mode** and **Block Editor**) appear misplaced over the top navigation bar and near the bottom-left corner. This layout interferes with visibility and usability, especially when interacting with the game menu or switching modes. ## Issue Description The **Game Mode** and **Block Editor** buttons overlap the top navigation bar, while other UI elements near the bottom-left corner partially cover the version indicator. This misplacement affects clarity and accessibility, making the interface feel cluttered and less polished. ### Observed Behavior - **Game Mode** and **Block Editor** buttons overlap the navbar. - Bottom-left corner elements (e.g., version text) are partially covered. - The layout feels inconsistent across different screen sizes. ### Expected Behavior UI containers should be properly aligned and spaced: - Top controls should appear **below** the navbar, not overlapping it. - Bottom indicators should remain **fully visible** and unobstructed. - Layout should adapt responsively to different resolutions. ## Environment | Property | Value | |-----------|--------| | Application | SpikerSoft Learning Platform | | Module | WASM Voxel Game | | Environment | Production | | Browser | Firefox | | Operating System | Windows 11 | | Version | v2026.06.28c | | Device | Desktop PC | ## Steps to Reproduce 1. Navigate to `learn.spikersoft.com/wasm-voxel-game`. 2. Observe the **Game Mode** and **Block Editor** containers at the top-left corner. 3. Note that they overlap the navbar. 4. Check the bottom-left corner for overlapping elements. ## Expected Result UI containers should be repositioned for better visibility and user experience. ## Actual Result Containers overlap with the navbar and other elements, reducing clarity and usability. ## Evidence - Screenshot shows **Game Mode** and **Block Editor** buttons placed over the navbar. - Bottom-left corner elements partially overlap the version indicator. ## Impact - Reduces visual clarity and professional appearance. - May cause accidental clicks on overlapping elements. - Affects overall quality of life (QoL) for users navigating or testing the game. ## Frequency Always ## Reproducibility 100% ## Severity Low ## Notes Repositioning these containers slightly below the navbar and adjusting margins for bottom elements would improve usability and visual consistency across all screen sizes.

Screenshot 2026-06-28 122324.png

696 KiB

spikerj commented

2026-06-30 23:14:54 +00:00

Partially confirmed and fixed in spikersoft-angular PR #84 (open, not yet merged) for the top-overlap symptom: the "Game Mode"/"Block Editor" toggle buttons are positioned top: 20px relative to their own wrapper, which never reserved space for the fixed app-menu-bar — unlike space-game, hex-tower-defence, video-call, etc., which all use the shared --app-toolbar-height CSS token for exactly this. Offset the toggle below the toolbar using that token, so it now renders fully below the nav bar at both desktop and mobile toolbar heights.

The bottom-left "version indicator" overlap is lower-confidence to diagnose without a live repro: the global version display (app.component.scss .version-display, position: fixed; bottom:12px; left:12px; z-index: 9998; pointer-events: none) sits in the same corner as the game's collapsed Fleet panel toggle (position: absolute; bottom:0; left:0; z-index: 100), so some visual overlap there is plausible, but since the version display is non-interactive (pointer-events: none) it shouldn't block clicks. Left unchanged in this PR pending visual QA — happy to add clearance/margin if a screenshot confirms it's still off after the top fix lands.

Partially confirmed and fixed in spikersoft-angular PR #84 (open, not yet merged) for the top-overlap symptom: the "Game Mode"/"Block Editor" toggle buttons are positioned `top: 20px` relative to their own wrapper, which never reserved space for the fixed `app-menu-bar` — unlike `space-game`, `hex-tower-defence`, `video-call`, etc., which all use the shared `--app-toolbar-height` CSS token for exactly this. Offset the toggle below the toolbar using that token, so it now renders fully below the nav bar at both desktop and mobile toolbar heights. The bottom-left "version indicator" overlap is lower-confidence to diagnose without a live repro: the global version display (`app.component.scss` `.version-display`, `position: fixed; bottom:12px; left:12px; z-index: 9998; pointer-events: none`) sits in the same corner as the game's collapsed Fleet panel toggle (`position: absolute; bottom:0; left:0; z-index: 100`), so some visual overlap there is plausible, but since the version display is non-interactive (`pointer-events: none`) it shouldn't block clicks. Left unchanged in this PR pending visual QA — happy to add clearance/margin if a screenshot confirms it's still off after the top fix lands.

spikerj commented

2026-07-01 01:23:48 +00:00

Partially resolved in spikersoft-angular PR #84 (merged to master) for the top-overlap symptom: the "Game Mode"/"Block Editor" toggle buttons were positioned top: 20px relative to their own wrapper, which never reserved space for the fixed app-menu-bar — unlike space-game, hex-tower-defence, video-call, etc., which all use the shared --app-toolbar-height CSS token for exactly this. Offset the toggle below the toolbar using that token, so it now renders fully below the nav bar at both desktop and mobile toolbar heights.

The bottom-left "version indicator" overlap is lower-confidence to diagnose without a live repro: the global version display (app.component.scss .version-display, position: fixed; bottom:12px; left:12px; z-index: 9998; pointer-events: none) sits in the same corner as the game's collapsed Fleet panel toggle (position: absolute; bottom:0; left:0; z-index: 100), so some visual overlap there is plausible, but since the version display is non-interactive (pointer-events: none) it shouldn't block clicks. Left unchanged pending visual QA — keeping this ticket open for that; will follow up with a screenshot check or close it out once confirmed fine.

Partially resolved in spikersoft-angular PR #84 (merged to `master`) for the top-overlap symptom: the "Game Mode"/"Block Editor" toggle buttons were positioned `top: 20px` relative to their own wrapper, which never reserved space for the fixed `app-menu-bar` — unlike `space-game`, `hex-tower-defence`, `video-call`, etc., which all use the shared `--app-toolbar-height` CSS token for exactly this. Offset the toggle below the toolbar using that token, so it now renders fully below the nav bar at both desktop and mobile toolbar heights. The bottom-left "version indicator" overlap is lower-confidence to diagnose without a live repro: the global version display (`app.component.scss` `.version-display`, `position: fixed; bottom:12px; left:12px; z-index: 9998; pointer-events: none`) sits in the same corner as the game's collapsed Fleet panel toggle (`position: absolute; bottom:0; left:0; z-index: 100`), so some visual overlap there is plausible, but since the version display is non-interactive (`pointer-events: none`) it shouldn't block clicks. Left unchanged pending visual QA — keeping this ticket open for that; will follow up with a screenshot check or close it out once confirmed fine.

spikerj commented

2026-07-01 08:29:58 +00:00

Opened spikersoft-angular PR #86 for the remaining bottom-left "version indicator" overlap. Confirmed the collision via code: app-fleet-panel (WASM Voxel Game) sits at the same bottom:0/left:0 corner as the global .version-display (bottom:12px/left:12px, z-index:9998, paints on top). Offset the fleet panel above it (bottom: 44px), same clearance pattern used for the top toggle fix in PR #84. Keeping this open until #86 merges.

Opened spikersoft-angular PR #86 for the remaining bottom-left "version indicator" overlap. Confirmed the collision via code: `app-fleet-panel` (WASM Voxel Game) sits at the same `bottom:0/left:0` corner as the global `.version-display` (`bottom:12px/left:12px`, `z-index:9998`, paints on top). Offset the fleet panel above it (`bottom: 44px`), same clearance pattern used for the top toggle fix in PR #84. Keeping this open until #86 merges.

spikerj commented

2026-07-01 14:14:37 +00:00

spikersoft-angular PR #86 merged to master. The fleet panel is now offset to bottom: 44px, clearing the global bottom-left version indicator. Combined with the top mode-toggle fix from PR #84, both misplaced-container symptoms in the WASM Voxel Game are resolved. Closing.

spikersoft-angular PR #86 merged to `master`. The fleet panel is now offset to `bottom: 44px`, clearing the global bottom-left version indicator. Combined with the top mode-toggle fix from PR #84, both misplaced-container symptoms in the WASM Voxel Game are resolved. Closing.

spikerj closed this issue

2026-07-01 14:14:48 +00:00

spikerj referenced this issue

2026-07-14 20:38:46 +00:00

[Bug][CI][Deploy] cancel-in-progress on master kills DEPLOY jobs — back-to-back merges cancel each other and fixes silently never ship #590

spikerj referenced this issue

2026-07-14 20:48:11 +00:00

[Bug][Tests][QuizGeneration] ValidRequest_IsConsumedAcked_QuizCompletesWithFakedQuestions_AndNotifies fails on master — quiz contains questions from pages other than the expected page 4 #586

Sign in to join this conversation.