Games: the fallback nav is the navbar's exact height (home CLS 0.019 → 0) (#55)

OP OpenVibers committed 12 Oct 2026 · f565952f68 · 1 file, +9 −3

On a phone, openvibe.games' home scored CLS 0.019. Its fallback navigation, shown until the shared navbar mounts, wrapped to two lines (about 70 px). When the 52 px navbar replaced it, the page moved up 18 px.

**What changes** (`apps/client/index.html`): the fallback is one row of exactly 52 px (`box-sizing: border-box`, `flex-wrap: nowrap`), so the swap moves nothing below it. On a narrow phone it scrolls sideways (scrollbar hidden). It still works without openvibe.network and hides once the navbar mounts, as before.

**Tests:** CSS only. No test reads this block; I checked the page in the phone sweep.

Changes

ddiff --git a/apps/client/index.html b/apps/client/index.html
iindex dd9da7a..236e350 100644
---- a/apps/client/index.html
++++ b/apps/client/index.html
@@@ -372,15 +372,21 @@
          margin: 0 auto;
        }
        /* Navigation that works without openvibe.network (roadmap WS-P task 5): shown until the shared
--         navbar mounts, which fills #navbar-mount and hides this. */
++         navbar mounts, which fills #navbar-mount and hides this. One row exactly the navbar's 52px
++         (scrolling sideways on a phone), so the swap moves nothing below it. */
        .ov-nav-fallback {
          position: relative;
          z-index: 5;
          display: flex;
--        flex-wrap: wrap;
++        flex-wrap: nowrap;
          align-items: center;
          gap: 6px 16px;
--        padding: 12px 20px;
++        box-sizing: border-box;
++        height: 52px;
++        padding: 0 20px;
++        overflow-x: auto;
++        scrollbar-width: none;
++        white-space: nowrap;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          font:
            500 14px/1.4 system-ui,