openvibers/openvibe.events Commits

Events: a phone no longer scrolls sideways on the home (#146)

OP OpenVibers committed 15 days ago · 0f13b452e9 · 2 files, +2 −2

The shared hero's aura is drawn 54px past its right edge and nothing clipped it, so the page was
43px wider than the screen at 390. The page clips on the horizontal axis only; vertical scrolling
is unchanged (checked in Chrome at 390: scrollWidth 433 -> 375, scroll to bottom still reaches it).

Changes

ddiff --git a/server/home.js b/server/home.js
iindex 22f7c2f..dfe2eea 100644
---- a/server/home.js
++++ b/server/home.js
@@@ -266,7 +266,7 @@ function sections({ apiUrl, stats = null }) {
  // footer meets the edges; each curl sample on its own full-width row (three columns cut every command off); the four
  // webhook steps two by two instead of three and one alone, each title level with its number.
  // The data sections' rules follow: the stat tiles, the per-service bars, the public event cards and the questions, in theme tokens (accent-light is drawn for dark themes, so text in it is mixed toward the text colour).
--const HOME_STYLE = '<style>body{margin:0}.page .sc-code{grid-template-columns:minmax(0,1fr)}.page .sc-steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}.page .sc-steps li{align-items:start;align-content:start}.page .sc-steps b{line-height:30px}'
++const HOME_STYLE = '<style>body{margin:0}/* The hero\'s aura is drawn 54px past its right edge (shared showcase, sc-hero-vis at right:-54px); without a clip the phone scrolls sideways by ~43px (2026-10-29). */.page{overflow-x:clip}.page .sc-code{grid-template-columns:minmax(0,1fr)}.page .sc-steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}.page .sc-steps li{align-items:start;align-content:start}.page .sc-steps b{line-height:30px}'
      + '.page{--hm-accent-text:color-mix(in srgb,var(--accent-light,#60a5fa) 45%,var(--text-primary,#e6edf7))}.sc-eyebrow{color:var(--hm-accent-text)}'
      + '.hm-stats-sec{margin-top:40px}.hm-stats{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr))}'
      + '.hm-stats li{display:grid;gap:2px;padding:14px 16px;border-radius:14px;border:1px solid var(--border,rgba(255,255,255,.08));background:var(--bg-secondary,#101828)}'
ddiff --git a/test/home.test.js b/test/home.test.js
iindex 61ab28a..e81e53b 100644
---- a/test/home.test.js
++++ b/test/home.test.js
@@@ -79,7 +79,7 @@ t('GET / as a browser: the home page, its CSP and its cache policy', async () =>
      assert.strictEqual(r.headers.vary, 'Accept');
      assert.strictEqual((r.body.match(/<h1\b/g) || []).length, 1, 'exactly one h1');
      // The page's own rules: the body meets the edges (no browser margin), each curl sample takes a full row.
--    assert.match(r.body, /<style>body\{margin:0\}\.page \.sc-code\{grid-template-columns:minmax\(0,1fr\)\}/);
++    // body margins are gone, the page clips the hero aura's spill, and the curl samples get one full-width column.\n    assert.match(r.body, /<style>body\{margin:0\}[\s\S]{0,200}\.page \.sc-code\{grid-template-columns:minmax\(0,1fr\)\}/);\n    assert.match(r.body, /\.page\{overflow-x:clip\}/);
      assert.ok(r.body.includes('Events your services'), 'the hero text');
      assert.ok(r.body.includes(`<link rel="canonical" href="${SITE}/">`), 'the canonical product origin');
      assert.ok(r.body.includes(`The API is at ${SITE}`), 'the hero note names the API origin');