Fix mobile example wrapping

[yoavf]

What changed

Mobile command examples now wrap instead of requiring horizontal scrolling. Long command fragments can break safely, and connector paths are hidden on narrow screens while text-pair highlights remain.

Why

The hero examples used single-line, horizontally scrollable terminal rows, which left request text and translations cut off on mobile screens.

Impact

Mobile visitors can read complete example requests and generated commands without needing to discover horizontal scrolling.

Validation

• npm run test:demo (31 passing)
• git diff --check

Greptile Summary

Mobile terminal examples now wrap long request and result text, while the cursor remains in the request flow and connector paths are hidden at narrow widths.

• Moves the cursor inside the request code element and preserves it across rendering paths.
• Adds responsive wrapping styles and mobile terminal sizing.
• Updates browser asset cache versions and corresponding configuration assertions.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains; the previously reported wrapped-cursor issue is fixed because every preview rendering path places the cursor after the request content.

Important Files Changed

Filename	Overview
docs/index.html	Nests the cursor in the request text flow and updates stylesheet and script cache versions.
docs/script.js	Keeps the singleton cursor as the final request child during animated, static, and reduced-motion example rendering.
docs/styles.css	Enables mobile command wrapping, hides connector paths at narrow widths, and aligns the inline cursor with wrapped text.
site/demo-config.test.js	Updates cache-version assertions to match the revised page assets.

_{Reviews (2): Last reviewed commit: "Keep cursor with wrapped request" | Re-trigger Greptile}

[cloudflare-workers-and-pages]

Deploying jst with    Cloudflare Pages

Latest commit:	fe7a370
Status:	✅  Deploy successful!
Preview URL:	https://b08c5ad8.jst-5mg.pages.dev
Branch Preview URL:	https://agent-fix-mobile-example-wra.jst-5mg.pages.dev

View logs

[qodo-code-review]

PR Summary by Qodo

Fix mobile command example wrapping

🐞 Bug fix 🕐 Less than 10 minutes

AI Description

• Wraps mobile request and command examples instead of requiring horizontal scrolling.
• Preserves highlight pairing while hiding misleading connector paths on narrow screens.
• Reserves mobile translation height and refreshes the stylesheet cache key.

Diagram

graph TD
  A["Mobile Browser"] --> B["Landing Page"] --> C["Versioned Styles"] --> D["Mobile Rules"] --> E["Wrapped Commands"]
  D --> F["Stable Panel"]
  D --> G["Hidden Connectors"]

Loading

High-Level Assessment

The responsive media-query approach is appropriate because this is purely presentational behavior and requires no runtime viewport logic. Retaining horizontal scrolling would preserve connector geometry but leave content undiscoverable, while JavaScript-driven layout handling would add unnecessary complexity.

Files changed (2) +21 / -1

Bug fix (1) +20 / -0

styles.cssWrap terminal examples on mobile screens +20/-0

Wrap terminal examples on mobile screens

• Updates narrow-screen terminal rows and result fragments to wrap long command text instead of scrolling horizontally. Reserves translation panel height and hides connector paths whose geometry becomes unclear after wrapping.

docs/styles.css

Other (1) +1 / -1

index.htmlRefresh the documentation stylesheet cache key +1/-1

Refresh the documentation stylesheet cache key

• Bumps the stylesheet query version from 25 to 27 so browsers retrieve the responsive wrapping fixes.

docs/index.html

[qodo-code-review]

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 show, collapse, or hide each part of a finding: code, evidence, and all

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗