Skip to content

fix(css): stabilize scoped rosview styling#13

Merged
joaner merged 1 commit into
ioai-tech:mainfrom
joaner:fix/scoped-css-playback-v1.5.3
Jun 4, 2026
Merged

fix(css): stabilize scoped rosview styling#13
joaner merged 1 commit into
ioai-tech:mainfrom
joaner:fix/scoped-css-playback-v1.5.3

Conversation

@joaner
Copy link
Copy Markdown
Contributor

@joaner joaner commented Jun 4, 2026

Restore scoped preflight behavior for standalone and embedded builds, and isolate playback scrubber centering from host Tailwind transforms for v1.5.3.

Description

  • Add standalone.css for the SPA shell (html / body / #root margin and full-viewport sizing) without leaking global resets into the npm library bundle.
  • Extend scoped preflight under #rosview-root: typography/list/fieldset margin resets, form control border normalization, and Tailwind .border* utility initialization so shadcn-style borders render correctly with preflight: false.
  • Fix #rosview-root layout: explicit root dimensions plus an inner h-full w-full wrapper so Tailwind utilities scoped with important: '#rosview-root' apply to descendants, not only to the root element itself.
  • Fix standalone App.tsx outer shell to use inline viewport sizing instead of scoped w-screen / h-screen classes outside #rosview-root.
  • Fix embedded playback scrubber: replace -translate-x/y-1/2 utilities with ros-playback-center-x / ros-playback-center-xy and translate: none so host apps using Tailwind v4 do not double-apply translate (thumb offset + broken track hit-testing).
  • Bump package version to 1.5.3.

Motivation / related issue

After v1.5.2 scoped CSS (important: '#rosview-root', preflight: false):

  1. Standalone site — Missing base resets (body, p margins, visible .border on buttons) made the main site look broken compared to pre-1.5.x.
  2. Embedded hosts (e.g. limx-agent) — Playback thumb appeared too high and scrubbing failed because the host’s global Tailwind v4 translate utilities stacked on top of rosview’s transform-based centering, and pointer-events-none overlays no longer hit #playback-track.

This PR restores predictable styling in both modes without re-enabling global preflight that would affect the host page.

Type of change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing behavior to change)
  • Documentation update
  • Refactor / internal cleanup (no behavior change)

Checklist

  • npm run lint passes with no errors
  • npm test passes (unit tests)
  • npm run build and npm run build:lib succeed
  • New behavior is covered by tests (or explain why tests aren't applicable)
  • Documentation updated (README, API.md, EMBEDDING.md) if the public API changed
  • Breaking change: all affected call sites updated and migration path described in PR description

Tests: Visual/CSS integration fix; no new unit tests. Manually verified standalone localhost:5173 and embedded /visualize playback track centering and scrubber hit-testing.

API compatibility

N/A — no changes to src/entrypoints/index.ts exports. CSS-only and internal component structure changes; consumers should upgrade to @ioai/rosview@1.5.3 and continue importing @ioai/rosview/style.css once published.

Screenshots / recordings

Restore scoped preflight behavior for standalone and embedded builds, and isolate playback scrubber centering from host Tailwind transforms for v1.5.3.
@joaner joaner merged commit 23e707e into ioai-tech:main Jun 4, 2026
2 checks passed
@joaner joaner deleted the fix/scoped-css-playback-v1.5.3 branch June 4, 2026 07:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant