clue for sql-off‑screen elementsThe elements at the top are not visible because they fall outside the screen area. This is noticeable as soon as the game starts. #88

New Issue

2026-05-08T22:42:24Z

Zhekrom commented

2026-05-08 22:42:24 +00:00

The elements at the top are not visible because they fall outside the screen area. This is noticeable as soon as the game starts.

Zhekrom commented

2026-05-08 22:45:03 +00:00

I tested it with another browser and the issue still occurs. (easy mode)

Screenshot 2026-05-08 182953.png

388 KiB

spikerj commented

2026-05-10 04:08:44 +00:00

Fixed.

Root cause

ClueForSqlComponent's :host was sized as display: block; width: 100%; height: 100vh; overflow: hidden;, which makes the game span the full viewport from y=0 to y=100vh. The app shell renders <app-menu-bar /> as position: fixed; top: 0; height: 64px (56px on mobile), which sits in front of the router-outlet. With overflow: hidden on the host, the top strip (case-grid header on the menu screen, briefing badge on the briefing screen, top of the left panel during gameplay) gets clipped underneath the menu permanently — the user can't scroll it back into view.

The other height: 100vh; overflow: hidden page in the workspace (video-call.component) handles this with padding-top: 64px but hardcodes the value. The proper convention lives at libraries/spikersoft-theme/src/lib/_variables.scss: a --app-toolbar-height CSS custom property exposed at :root (64px desktop / 56px mobile via the same 767px breakpoint the menu-bar uses).

Fix

One SCSS block in libraries/features/games-clue-for-sql/src/lib/clue-for-sql.component.scss:

:host {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100vh;
  padding-top: var(--app-toolbar-height, 64px);
  background: $bg-darkest;
  color: $text-primary;
  font-family: $font-serif;
  overflow: hidden;
}

With box-sizing: border-box the host's 100vh is the OUTER box, so padding-top: var(--app-toolbar-height) reserves the menu strip in-place. The inner content area is exactly 100vh - 64px (or 100vh - 56px below 767px), which is what the existing children (.menu-screen, .briefing-screen, .game-layout, .result-screen) all consume via height: 100%. No child changes needed; mobile breakpoint handled automatically because the global token already flips.

Verification

nx build feature-games-clue-for-sql succeeds (1.5s, 3 task deps clean).
No lint errors on the modified file.
The case grid's top row (the part shown clipped in the attached screenshot) now sits cleanly below the menu bar in both easy mode and the briefing/game screens.

Closing.

Fixed. ## Root cause `ClueForSqlComponent`'s `:host` was sized as `display: block; width: 100%; height: 100vh; overflow: hidden;`, which makes the game span the full viewport from `y=0` to `y=100vh`. The app shell renders `<app-menu-bar />` as `position: fixed; top: 0; height: 64px` (56px on mobile), which sits in front of the router-outlet. With `overflow: hidden` on the host, the top strip (case-grid header on the menu screen, briefing badge on the briefing screen, top of the left panel during gameplay) gets clipped underneath the menu permanently — the user can't scroll it back into view. The other `height: 100vh; overflow: hidden` page in the workspace (`video-call.component`) handles this with `padding-top: 64px` but hardcodes the value. The proper convention lives at `libraries/spikersoft-theme/src/lib/_variables.scss`: a `--app-toolbar-height` CSS custom property exposed at `:root` (`64px` desktop / `56px` mobile via the same `767px` breakpoint the menu-bar uses). ## Fix One SCSS block in `libraries/features/games-clue-for-sql/src/lib/clue-for-sql.component.scss`: ```scss :host { box-sizing: border-box; display: block; width: 100%; height: 100vh; padding-top: var(--app-toolbar-height, 64px); background: $bg-darkest; color: $text-primary; font-family: $font-serif; overflow: hidden; } ``` With `box-sizing: border-box` the host's `100vh` is the OUTER box, so `padding-top: var(--app-toolbar-height)` reserves the menu strip in-place. The inner content area is exactly `100vh - 64px` (or `100vh - 56px` below 767px), which is what the existing children (`.menu-screen`, `.briefing-screen`, `.game-layout`, `.result-screen`) all consume via `height: 100%`. No child changes needed; mobile breakpoint handled automatically because the global token already flips. ## Verification - `nx build feature-games-clue-for-sql` succeeds (1.5s, 3 task deps clean). - No lint errors on the modified file. - The case grid's top row (the part shown clipped in the attached screenshot) now sits cleanly below the menu bar in both easy mode and the briefing/game screens. Closing.

spikerj closed this issue

2026-05-10 04:08:47 +00:00

spikerj referenced this issue

2026-05-10 04:09:52 +00:00

Video call component: hardcoded 64px toolbar reservation over-reserves on mobile #95

spikerj referenced this issue

2026-05-10 04:11:17 +00:00

Video call component: hardcoded 64px toolbar reservation over-reserves on mobile #95

spikerj referenced this issue

2026-07-05 07:43:41 +00:00

[ArtStudio] ProArt capability parity — user/predefined workflows, multi-method stages, full PBR map sets, rig-method chain, curation (epic #346 phase 2) #378

spikerj referenced this issue