Source filter checkboxes frozen — Quarto TOC sidebar intercepts clicks

[rdhyee]

Symptom

On https://isamples.org/tutorials/progressive_globe.html the Source filter checkboxes (SESAR, OpenContext, GEOME, Smithsonian) do not toggle when clicked with the mouse. The checkboxes appear fully visible and clickable, but clicks are silently swallowed — no state change, no globe re-render.

Root cause

Quarto's auto-generated #quarto-margin-sidebar (the sticky "On this page" TOC column, position: sticky, z-index: 1, width 215px) overlaps the .side-panel that contains #sourceFilter. Because #quarto-margin-sidebar is later in the DOM / higher in the stacking context, pointer events at the checkbox coordinates hit the margin-sidebar first and are consumed there.

Evidence from live debugging (captured via Chrome DevTools on the deployed page)

• document.elementsFromPoint(cx, cy) where (cx, cy) is the SESAR checkbox center returns, in z-order:

  0: DIV#quarto-margin-sidebar.sidebar margin-sidebar   ← intercepts
  1: INPUT (the actual SESAR checkbox)
  2: LABEL.legend-item
  3: P
  4: DIV#sourceFilter.legend
  5: DIV.side-panel
  ...
  

• Installing capture-phase listeners on #sourceFilter for pointerdown/mousedown/click/change and then issuing a real mouse click at the checkbox coordinates produces zero logged events — the event never reaches the filter panel.
• Setting #quarto-margin-sidebar { pointer-events: none } restores the expected behavior: elementFromPoint now returns the INPUT, the click handler fires, the checkbox toggles, and the globe re-queries.
• #quarto-margin-sidebar bounding rect overlaps #sourceFilter bounding rect in both x and y on a standard laptop viewport (~1188×918).

Why it's not consistent

Earlier in my testing session, a click at (914, 296) did toggle the checkbox. A later click at (970, 320) — the new correct coords after a small layout shift — did not. The margin-sidebar and filter panel are both sticky/sized-relatively, so whether the checkbox sits under the sidebar's actual rectangle vs. in a non-overlapping sliver depends on viewport width and the content above. Which is why this is easy to dismiss as "works for me" in dev.

Fix options (in order of preference)

1. Disable TOC for this page. The Interactive Explorer is an app, not an article; a TOC column isn't useful. Add toc: false (or toc-location: body if we want one inline) to the YAML frontmatter of tutorials/progressive_globe.qmd.
2. Give the side-panel a higher stacking context — add position: relative; z-index: 2; to .side-panel. Keeps the TOC visible but ensures the filter panel wins pointer events.
3. Constrain the margin-sidebar width or position so it can't overlap the filter panel at typical viewport sizes.

Option 1 is the simplest and removes a UI element we don't need anyway. Recommended.

Reproduction

1. Open https://isamples.org/tutorials/progressive_globe.html in a normal desktop Chrome at ~1200px width.
2. Wait for globe to load.
3. Try clicking on any of the four source-filter checkboxes in the right-hand panel.
4. Observe: checkbox does not toggle, globe does not update.
5. In DevTools console: document.getElementById('quarto-margin-sidebar').style.pointerEvents = 'none'
6. Click checkbox again — now it works.

Affected pages

Likely the same problem on any tutorial that:

• Has right-side UI controls (.side-panel or similar)
• Has Quarto TOC enabled
• Is viewed at a viewport width where the two overlap

Worth auditing isamples_explorer.qmd and zenodo_isamples_analysis.qmd for the same class of bug after fixing this one.