[JarlLyng]

Closes #50. #59 covers the icon part of that issue; this PR covers the two phone points.

Horizontal overflow at 375 px

The hero mockup (.extension-mockup) is width: 320px in content-box, so with its padding and border it takes 354 px. On phones the hero is one 1fr grid track, and a 1fr track never shrinks below its widest item, so the track grew to 354 px and the page ended 3 px past a 375 px viewport.

Under the existing 768 px breakpoint:

• .hero uses minmax(0, 1fr), so the track stays inside the page.
• .extension-mockup gets box-sizing: border-box; max-width: 100%, so the mockup stays inside the track (320 px at 375 px, narrower on smaller screens).

No new spacing or colour values. Desktop is unchanged: the mockup is still 354 px there.

The first phone action is the demo

A phone cannot install a Chrome extension, but it can use the web demo. Under 768 px the hero now shows a Check a site link to #try where the Install BotLens button was. On desktop nothing changes: the link is hidden and the install button is the hero's action.

How it works:

• The link is in the markup with hidden. demo.js unhides it in the same place it unhides the #try section, so it shows only when the demo is on.
• CSS shows it only under 768 px, and hides the install button next to it only while the link is showing. If data-api is ever emptied, the demo and the link stay hidden and phones get the install button back.
• It has the btn-hero style and a demo-link Umami event with placement: hero, like the store links, so phone use of it can be seen.

Design choices for you to judge:

• Install is hidden on phones, not demoted. One clear action in the hero. The page still has the navbar's "Add to Chrome" and the install section further down for anyone who wants the store page.
• The navbar's "Add to Chrome" is unchanged. On phones it is the only item in the navbar, so it is the first control on the page. I left it alone to keep this small. If you want the demo there too, it can get the same swap.
• Link text is "Check a site", matching the demo's heading and its Check button.
• The link jumps to #try; the sticky navbar covers the section's small "Try it" label, but the heading and the form are in view. The site's other anchors behave the same way.

Checked

In a local browser (python3 -m http.server on website/):

• 375×812: scrollWidth equals clientWidth (375), no element past the right edge; the first hero action is "Check a site", and it lands on the demo form.
• 320×640: no horizontal scroll either.
• With the link forced back to hidden (demo off) at 375 px: the install button shows.
• 1280×800: unchanged; install button shown, link hidden, mockup 354 px.
• privacy.html at 375 px: no horizontal scroll.

npm run lint, npm test (79 pass) and npm run check:faq pass.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
botlens-demo	Ready	Preview	Oct 18, 2026 11:05pm UTC