Keep the modern mobile gauge row in view when a test starts

[Copilot]

On the modern frontend, mobile users could start a test with the active gauge row still below the fold, leaving the primary in-progress state outside the viewport. This change makes the first running-state gauge visible immediately after Start without changing initial page load, server selection, or desktop behavior.

• Mobile start-state viewport behavior

  • Queue a one-shot mobile-only scroll when the test enters RUNNING.
  • Defer the scroll until the running-state UI has rendered, so the measurement is taken against the post-start layout rather than the pre-click hero layout.
  • Only scroll when the initial download gauge is actually outside the viewport.

• Regression coverage

  • Add a focused Playwright spec for the modern frontend on a constrained mobile viewport.
  • Stub the speedtest runtime and server data so the test isolates the viewport transition and asserts that the download gauge is visible immediately after pressing Start.

if (
  testState.state === RUNNING &&
  testState.initialGaugeScrollPending &&
  !testState.initialGaugeScrollScheduled
) {
  testState.initialGaugeScrollScheduled = true;
  requestAnimationFrame(() => {
    if (testState.state === RUNNING) {
      scrollInitialDownloadGaugeIntoView();
    }
    testState.initialGaugeScrollPending = false;
    testState.initialGaugeScrollScheduled = false;
  });
}

• Fixes Results hidden below the fold on mobile #844

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Keep the mobile download gauge visible when tests start

🐞 Bug fix 🧪 Tests 🕐 10-20 Minutes

AI Description

• Scrolls the initial download gauge into view when mobile tests enter the running state.
• Defers one-shot scrolling until rendering completes and skips visible or desktop gauges.
• Adds deterministic Playwright coverage for the constrained mobile viewport transition.

Diagram

sequenceDiagram
  actor U as Mobile User
  participant B as Start Button
  participant S as Speedtest
  participant T as UI State
  participant R as Render Loop
  participant F as Browser Frame
  participant G as Download Gauge
  U->>B: Press Start
  B->>S: Start test
  B->>T: Set RUNNING and pending
  R->>T: Read pending state
  R->>G: Render running gauge
  R->>F: Queue one-shot callback
  F->>G: Measure viewport bounds
  alt Gauge outside viewport
    G->>G: Scroll to center
  end

Loading

High-Level Assessment

The one-shot requestAnimationFrame approach is appropriate because the gauge must be measured after the running-state layout renders. Immediate scrolling risks using stale geometry, while observers or persistent listeners would add unnecessary lifecycle complexity for a single start transition.

Files changed (2) +141 / -0

Bug fix (1) +42 / -0

index.jsConditionally reveal the mobile download gauge after starting +42/-0

Conditionally reveal the mobile download gauge after starting

• Tracks a one-shot pending scroll when a test enters RUNNING. After the running UI renders, it measures the download gauge and centers it only on narrow viewports when the full gauge is outside the viewport.

frontend/javascript/index.js

Tests (1) +99 / -0

mobile-gauge-visibility.spec.jsCover mobile gauge visibility after Start +99/-0

Cover mobile gauge visibility after Start

• Adds a Playwright regression test using a constrained mobile viewport and stubbed runtime, settings, and server responses. It verifies the initially hidden download gauge becomes fully visible immediately after the test starts.

tests/e2e/mobile-gauge-visibility.spec.js

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Tip of the day

💡 Did you know, you can hide the parts of a finding you never read, like the evidence or the agent prompt

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

[Copilot]

🟢 Approval recommended

No unresolved review issues were identified.

Pull request overview

Improves the modern mobile experience by keeping the initial download gauge visible when a test starts.

Changes:

• Adds deferred, mobile-only gauge scrolling.
• Adds Playwright regression coverage for constrained mobile viewports.

File summaries

File	Summary
tests/e2e/mobile-gauge-visibility.spec.js	Verifies gauge visibility after starting a test.
frontend/javascript/index.js	Implements deferred, one-shot gauge scrolling.

Review details

• Files reviewed: 2/2 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.