fix(machine): keep the mouse pointer visible on the web demo #96

Merged
padreug merged 1 commit from fix/demo-cursor-visible into dev 2026-09-22 12:59:56 +00:00
Owner

On atm.demo.aiolabs.dev the pointer disappeared unless it was over a button.

index.html has its own inline

On atm.demo.aiolabs.dev the pointer disappeared unless it was over a button. index.html has its own inline <style> with a second cursor rule: @media (min-width: 1024px) { html, body { overflow: hidden; cursor: none; } } That's every desktop browser. Descendants inherit it; buttons carry Tailwind's .cursor-pointer and override it, which is why the pointer appeared to blink in and out. The .kiosk scoping in #88 fixed src/style.css but missed this one, so the two rules disagreed. Deleted rather than gated — src/style.css's `.kiosk, .kiosk *` rule already covers <html> and everything under it with !important, and main.ts adds that class unless VITE_DEMO_TAG is set. Real machines are unaffected and cursor hiding has one owner instead of two. This block can't make the kiosk-vs-demo call anyway: static HTML, and the CSP (script-src 'self') forbids an inline script that could read the env. overflow: hidden untouched. Built both ways: no tag → no cursor rule in the HTML, .kiosk still applied, !important hide still in the CSS; with the tag → the .kiosk branch is dead-code-eliminated and no cursor: none survives. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_013A6683cCHnQxFUosx1krY4
index.html's inline <style> hid the cursor on any viewport >= 1024px:

    @media (min-width: 1024px) { html, body { overflow: hidden; cursor: none; } }

which is every desktop browser opening the public demo. Descendants inherit
it, so the pointer vanished everywhere except over buttons — those carry
Tailwind's .cursor-pointer, which overrode the inherited value and made the
bug look stranger than it was.

This is the rule the earlier .kiosk scoping missed: src/style.css got gated,
this one did not, so the two disagreed.

Delete it rather than gate it. src/style.css's `.kiosk, .kiosk *` rule already
covers <html> and every descendant with !important, and main.ts applies that
class unless VITE_DEMO_TAG is set — so real machines are unaffected and cursor
hiding now has exactly one owner, the one that knows whether this is a kiosk.
The block here cannot make that call: it is static HTML, and the page CSP
(script-src 'self') forbids an inline script that could read the env.

overflow: hidden stays as it was — untouched on both.

Verified by building both ways: without the tag the built HTML has no cursor
rule, the JS still adds .kiosk and the CSS still carries the !important
hide; with the tag the .kiosk branch is dead-code-eliminated and no
cursor: none survives anywhere.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013A6683cCHnQxFUosx1krY4
padreug deleted branch fix/demo-cursor-visible 2026-09-22 12:59:56 +00:00
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
aiolabs/bitspire!96
No description provided.