Skip to content

v1.3.0 — sticky topbar with promoted actions, reachable display types

Choose a tag to compare

@spunt spunt released this 22 Sep 22:20
· 6 commits to main since this release

Navigation and chrome release. The global actions move out of the sidebar into a sticky topbar, and the two display-only question types become reachable.

Changed

  • ⚑ Wrong questions? and Review & export moved to the topbar. Both sat in a sidebar footer below the full question tree — so on a long form they scrolled out of view, and below 1100 px they vanished entirely with the sidebar. They are global actions rather than navigation, so they now live in the topbar, which has the room and is present at every width. At ≤720 px the form title hides and both buttons reduce to their glyphs, keeping an aria-label.
  • The topbar is sticky. The layout toggle, both promoted actions, and the theme switcher stay reachable while scrolling — most noticeable in the long "All sections" view. Stacking order is now explicit: topbar 90 < theme dropdown 100 < critique modal 200. The critique overlay was previously also z-index: 90, tying with the topbar and resolving only by DOM order.
  • Side gutters come from the wizard track, not the card. .card had width: 100% plus margin: 0 16px, which overflowed its track and clamped back to full width — so the card rendered edge-to-edge on phones instead of inset. Measured card inset is now 16 px at 375/480/640 px, previously 0 px.

Fixed

  • narrative-card and embedded-media are now reachable. refreshTOC skipped both display-only types, so the only way to see them was to click Next past every question and notice them in passing — in the published catalog they were effectively invisible. Both now get an italic TOC entry, excluded from the section's answered/total count (still 0/0) because neither is answerable. The label falls back tocLabel → label → title → caption → alt → placeholder, so a raw question id never surfaces in the nav.
  • The catalog's embedded-media example no longer needs network access. It pointed at a remote Wikimedia URL, which renders as an empty box offline, behind a firewall, or when the host blocks hotlinking — and defeats the purpose of an --assets inline build. It is now an inline SVG data URI. Note for spec authors: percent-encode # in an inline SVG, since a literal # starts a URI fragment and silently truncates the image.

Removed

  • The mobile critique FAB, which existed only because the sidebar hid below 1100 px. The topbar is present at every width, so the workaround and its duplicate entry point are gone.

Verification

  • 13/13 specs render with 0 console errors; 12/12 golden exports unchanged.
  • 5/5 presets pass axe with 0 violations on both layouts.
  • Embedded image renders with 0 network requests.
  • Sticky topbar holds top=0 at scrollY=2500 in grouped view; critique overlay paints above it.
  • No horizontal overflow at 1440/1200/1100/900/768/720/640/480/375 px.

Try it live: https://www.bobspunt.com/intake-form/docs/demo.html

🤖 Generated with Claude Code