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

New Issue

2026-05-10T04:09:52Z

spikerj commented

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

Problem

projects/spikersoft/src/app/_components/video-call/video-call.component.scss:16 hardcodes the menu-bar reservation:

:host {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  padding-top: 64px; /* Space for absolute menu bar */
  overflow: hidden;
  ...
}

The global --app-toolbar-height token in libraries/spikersoft-theme/src/lib/_variables.scss already publishes the correct value (64px desktop, 56px mobile via the same 767px breakpoint the app-menu-bar itself uses). The hardcoded 64px here works on desktop but over-reserves by 8px on mobile (≤7 67px viewport), leaving an empty band between the menu and the video call UI.

Discovered via

Follow-up to issue #88 (clue-for-sql was clipping under the menu — fixed by adopting the --app-toolbar-height token). A workspace-wide grep for padding-top: 64px plus height: 100vh flagged this file as the second-and-only-remaining offender; the 100vh survey otherwise uses min-height: calc(100vh - 64px) which only over-reserves a constant on mobile but doesn't visually misalign the same way.

Suggested fix

Replace the hardcoded 64px with the global token, matching the pattern just landed for clue-for-sql in #88:

:host {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  padding-top: var(--app-toolbar-height, 64px);
  overflow: hidden;
  ...
}

box-sizing: border-box is also missing today — with the implicit content-box default, height: 100vh + padding-top: 64px actually makes the host extend 64px past the viewport bottom, with the bottom 64px clipped by overflow: hidden. The flex-column layout currently masks this because :host::before is position: absolute; inset: 0 (the animated radial gradient stays visually correct) and there's nothing important pinned to the bottom of the host — but the geometry is wrong.

Owner pointers

projects/spikersoft/src/app/_components/video-call/video-call.component.scss — lines 11–27 are the host block.
Reference token: libraries/spikersoft-theme/src/lib/_variables.scss:48 (desktop) and :56 (mobile media-query override).
Reference fix: see issue #88's resolution in the same :host shape on clue-for-sql.component.scss.

## Problem `projects/spikersoft/src/app/_components/video-call/video-call.component.scss:16` hardcodes the menu-bar reservation: ```scss :host { display: flex; flex-direction: column; height: 100vh; width: 100%; padding-top: 64px; /* Space for absolute menu bar */ overflow: hidden; ... } ``` The global `--app-toolbar-height` token in `libraries/spikersoft-theme/src/lib/_variables.scss` already publishes the correct value (`64px` desktop, `56px` mobile via the same `767px` breakpoint the `app-menu-bar` itself uses). The hardcoded `64px` here works on desktop but over-reserves by 8px on mobile (≤7 67px viewport), leaving an empty band between the menu and the video call UI. ## Discovered via Follow-up to issue #88 (`clue-for-sql` was clipping under the menu — fixed by adopting the `--app-toolbar-height` token). A workspace-wide grep for `padding-top: 64px` plus `height: 100vh` flagged this file as the second-and-only-remaining offender; the `100vh` survey otherwise uses `min-height: calc(100vh - 64px)` which only over-reserves a constant on mobile but doesn't visually misalign the same way. ## Suggested fix Replace the hardcoded `64px` with the global token, matching the pattern just landed for `clue-for-sql` in #88: ```scss :host { box-sizing: border-box; display: flex; flex-direction: column; height: 100vh; width: 100%; padding-top: var(--app-toolbar-height, 64px); overflow: hidden; ... } ``` `box-sizing: border-box` is also missing today — with the implicit `content-box` default, `height: 100vh + padding-top: 64px` actually makes the host extend 64px past the viewport bottom, with the bottom 64px clipped by `overflow: hidden`. The flex-column layout currently masks this because `:host::before` is `position: absolute; inset: 0` (the animated radial gradient stays visually correct) and there's nothing important pinned to the bottom of the host — but the geometry is wrong. ## Owner pointers - `projects/spikersoft/src/app/_components/video-call/video-call.component.scss` — lines 11–27 are the host block. - Reference token: `libraries/spikersoft-theme/src/lib/_variables.scss:48` (desktop) and `:56` (mobile media-query override). - Reference fix: see issue #88's resolution in the same `:host` shape on `clue-for-sql.component.scss`.

spikerj commented

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

Fixed.

Change

projects/spikersoft/src/app/_components/video-call/video-call.component.scss:11–16:

 /* Main Component Wrapper */
 :host {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   height: 100vh;
   width: 100%;
-  padding-top: 64px; /* Space for absolute menu bar */
+  padding-top: var(--app-toolbar-height, 64px);
   overflow: hidden;

Same box-sizing: border-box + --app-toolbar-height token swap that landed for clue-for-sql in #88. Mobile breakpoint now reserves 56px instead of 64px (no more 8px gap below the menu on ≤767px viewports), and the host's outer box no longer extends past the viewport bottom.

Verification

nx build spikersoft --configuration development succeeds (19.2s, 62 task deps clean) — the video-call route's SCSS recompiles without warnings.
No lint errors on the modified file.

Closing.

Fixed. ## Change `projects/spikersoft/src/app/_components/video-call/video-call.component.scss:11–16`: ```diff /* Main Component Wrapper */ :host { + box-sizing: border-box; display: flex; flex-direction: column; height: 100vh; width: 100%; - padding-top: 64px; /* Space for absolute menu bar */ + padding-top: var(--app-toolbar-height, 64px); overflow: hidden; ``` Same `box-sizing: border-box` + `--app-toolbar-height` token swap that landed for `clue-for-sql` in #88. Mobile breakpoint now reserves 56px instead of 64px (no more 8px gap below the menu on ≤767px viewports), and the host's outer box no longer extends past the viewport bottom. ## Verification - `nx build spikersoft --configuration development` succeeds (19.2s, 62 task deps clean) — the video-call route's SCSS recompiles without warnings. - No lint errors on the modified file. Closing.

spikerj closed this issue

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

spikerj referenced this issue

2026-07-02 01:29:40 +00:00

[Playgrounds P2] Shell parity audit — C / C++ / Python vs C# small-gap sweep #325

spikerj referenced this issue

2026-07-02 15:07:50 +00:00

[Epic] Playground uniformity & lesson content layers (C / C++ / JavaScript / Python / C#) #323

spikerj referenced this issue

2026-07-02 22:46:08 +00:00

[Epic] Playground uniformity & lesson content layers (C / C++ / JavaScript / Python / C#) #323

spikerj referenced this issue