Top-bar notifications cause layout shift — overlay or reserve space to avoid jumps

[WERSIT35]

Summary

Top-bar notifications (spin start, free spin, etc.) are inserted/removed in a way that causes layout reflow: when a notification appears the game table shifts down, and when it disappears the table shifts back up. This creates an unpleasant jarring motion during play.

Steps to reproduce

1. Start the game and trigger actions that show top-bar notifications (spin start, feature triggers, free spin messages).
2. Observe the UI: the game table (reels) moves vertically as the notification appears and disappears.

Observed behavior

• Notifications cause the main game container to change position/height, shifting the game table.
• UI elements jump unexpectedly making the whole view unstable during spins and animations.

Expected behavior

• Notifications should not cause layout reflow or move the game table. They should overlay or occupy reserved space without shifting core game content.

Suggested fixes / notes for implementers

• Render notifications in an overlay layer (position: fixed/absolute) above the game container so they do not affect document flow.
• Alternatively, reserve a fixed-height area for messages so appear/disappear do not change layout.
• Use CSS transforms (translateY) for show/hide animations to avoid reflow.
• Prefer composited properties (opacity, transform) rather than height/margin changes for animations.
• Ensure z-index and pointer-events are correct so overlays don't block input accidentally.

Files/areas to inspect

• UI notification component (client styles, client/main.js or relevant UI module)
• CSS that controls top bar layout and transitions

Impact

Medium — UI/UX regression that degrades player comfort and perception of polish.