aiolabs/bitspire
9
0
Fork 0
Code Issues 52 Pull requests 2 Projects Releases Packages Wiki Activity Actions

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
Conversation 0 Commits 1 Files changed 1 +7 -2
1 changed files with 7 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit aa22ba1c27 - Show all commits

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

Prev Next 
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 2026-09-22 14:54:57 +02:00
commit aa22ba1c27

9
apps/machine/index.html
View file

@ -33,12 +33,17 @@
padding: 0;
background: #000;
}
/* Kiosk-only: lock overflow and hide cursor */
/* Kiosk-only: lock overflow. The cursor is NOT hidden here — that is
src/style.css's `.kiosk` rule, which main.ts applies at runtime unless
VITE_DEMO_TAG is set. This block can't make that distinction (static
HTML, and the CSP forbids an inline script to read the env), so a
`cursor: none` here would also blank the pointer on the public web
demo, where people drive the kiosk with a mouse. One owner for cursor
hiding, and it is the one that knows whether this is a real machine. */
@media (min-width: 1024px) {
html,
body {
overflow: hidden;
cursor: none;
}
}
</style>