github snake wont display properly in browser fullscreen mode #18

New Issue

2026-04-28T15:27:59Z

enjin2310 commented

2026-04-28 15:27:59 +00:00

Issue: GitHub Snake wont display properly in browser fullscreen mode

Description:
The GitHub Snake animation/game does not display properly when the browser is in fullscreen mode. Users are experiencing display issues when trying to use the feature in fullscreen.

**Issue:** GitHub Snake wont display properly in browser fullscreen mode **Description:** The GitHub Snake animation/game does not display properly when the browser is in fullscreen mode. Users are experiencing display issues when trying to use the feature in fullscreen.

spikerj commented

2026-05-05 04:02:07 +00:00

Resolved -- Added :host-context(:fullscreen) CSS rules in github-snake.component.scss for responsive grid scaling in fullscreen mode. The grid now scales dynamically based on viewport dimensions when in fullscreen.

**Resolved** -- Added `:host-context(:fullscreen)` CSS rules in `github-snake.component.scss` for responsive grid scaling in fullscreen mode. The grid now scales dynamically based on viewport dimensions when in fullscreen.

spikerj closed this issue

2026-05-05 04:03:05 +00:00

spikerj reopened this issue

2026-05-11 16:56:34 +00:00

spikerj commented

2026-05-11 16:56:47 +00:00

Reopening — the :host-context(:fullscreen) CSS fix from May 5 did not fully resolve this.

The game grid still renders incorrectly when the browser is in fullscreen mode. Looking at the screenshot, the grid tiles overflow the visible area and the layout doesn't adapt to the full viewport height — the snake board is clipped at the bottom and the contribution-graph style squares extend beyond the playable/visible region.

The previous fix addressed scaling via :host-context(:fullscreen) but the underlying issue appears to be that the grid container's height calculation doesn't account for the full viewport in fullscreen (likely still using a fixed pixel height or a vh-based value that doesn't update correctly when the browser chrome disappears in fullscreen).

To investigate:

Check whether the grid canvas/container has a fixed height that needs to become 100vh (or 100dvh) in fullscreen.
The :host-context(:fullscreen) selector may not be matching if the fullscreen element is the browser's native F11 fullscreen rather than a programmatic requestFullscreen() on the component — F11 fullscreen doesn't set the :fullscreen pseudo-class on any element.
May need a @media (display-mode: fullscreen) or a resize observer fallback for the F11 case.

**Reopening** — the `:host-context(:fullscreen)` CSS fix from May 5 did not fully resolve this. The game grid still renders incorrectly when the browser is in fullscreen mode. Looking at the screenshot, the grid tiles overflow the visible area and the layout doesn't adapt to the full viewport height — the snake board is clipped at the bottom and the contribution-graph style squares extend beyond the playable/visible region. The previous fix addressed scaling via `:host-context(:fullscreen)` but the underlying issue appears to be that the grid container's height calculation doesn't account for the full viewport in fullscreen (likely still using a fixed pixel height or a `vh`-based value that doesn't update correctly when the browser chrome disappears in fullscreen). **To investigate:** - Check whether the grid canvas/container has a fixed `height` that needs to become `100vh` (or `100dvh`) in fullscreen. - The `:host-context(:fullscreen)` selector may not be matching if the fullscreen element is the browser's native F11 fullscreen rather than a programmatic `requestFullscreen()` on the component — F11 fullscreen doesn't set the `:fullscreen` pseudo-class on any element. - May need a `@media (display-mode: fullscreen)` or a resize observer fallback for the F11 case.

spikerj commented

2026-05-11 16:59:25 +00:00

Fixed — the root cause was simpler than the fullscreen pseudo-class theory:

The .container had width: fit-content but no centering mechanism — it just sat at the default flow position (top-left of the route viewport).
The previous :host-context(:fullscreen) rules only applied centering when a fullscreen pseudo-class was active, which doesn't fire for F11 browser fullscreen anyway.

Changes:

Added :host { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } so the game is always centered in its viewport regardless of fullscreen mode.
Switched the grid from fixed 12px cells to responsive clamp(10px, 1.4vw, 14px) so it scales smoothly at any viewport size (including fullscreen) without needing separate fullscreen overrides.
Removed the dead :host-context(:fullscreen) rules since centering is now unconditional.

**Fixed** — the root cause was simpler than the fullscreen pseudo-class theory: 1. The `.container` had `width: fit-content` but no centering mechanism — it just sat at the default flow position (top-left of the route viewport). 2. The previous `:host-context(:fullscreen)` rules only applied centering when a fullscreen pseudo-class was active, which doesn't fire for F11 browser fullscreen anyway. **Changes:** - Added `:host { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }` so the game is always centered in its viewport regardless of fullscreen mode. - Switched the grid from fixed `12px` cells to responsive `clamp(10px, 1.4vw, 14px)` so it scales smoothly at any viewport size (including fullscreen) without needing separate fullscreen overrides. - Removed the dead `:host-context(:fullscreen)` rules since centering is now unconditional.

spikerj closed this issue

2026-05-11 16:59:30 +00:00

spikerj referenced this issue

2026-06-08 17:43:08 +00:00

Bug: Learn C# - reload example in editor button not working #204

spikerj referenced this issue

2026-06-08 17:43:08 +00:00

C# Bug: Lesson 5 button "Try" in the editor does nothing #165

spikerj referenced this issue

2026-06-26 15:05:58 +00:00

[Bug] Registration verification email never delivered — notifications email worker is not built/deployed (+ Email/Smtp config-key mismatch) #258

spikerj referenced this issue