From 4881801b87c472a4202fc95d4ed35c9063ba5023 Mon Sep 17 00:00:00 2001 From: joaner Date: Thu, 4 Jun 2026 15:16:13 +0800 Subject: [PATCH] fix(css): stabilize scoped rosview styling Restore scoped preflight behavior for standalone and embedded builds, and isolate playback scrubber centering from host Tailwind transforms for v1.5.3. --- package-lock.json | 4 +- package.json | 2 +- src/entrypoints/App.tsx | 3 +- src/entrypoints/main.tsx | 1 + src/entrypoints/standalone.css | 16 +++++++ src/features/viewer/RosViewProvider.tsx | 12 +++-- .../workspace/playback/PlaybackBar.tsx | 6 +-- src/index.css | 46 +++++++++++++++++-- 8 files changed, 73 insertions(+), 17 deletions(-) create mode 100644 src/entrypoints/standalone.css diff --git a/package-lock.json b/package-lock.json index 284dbff..0c5fb1d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ioai/rosview", - "version": "1.5.2", + "version": "1.5.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@ioai/rosview", - "version": "1.5.2", + "version": "1.5.3", "license": "MIT", "devDependencies": { "@eslint/js": "^9.39.4", diff --git a/package.json b/package.json index 9feb39c..2af48af 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ioai/rosview", - "version": "1.5.2", + "version": "1.5.3", "description": "High-performance robotics data visualization for MCAP, ROS bag, ROS2 db3, HDF5 and BVH — embeddable React component and standalone SPA", "keywords": [ "ros", diff --git a/src/entrypoints/App.tsx b/src/entrypoints/App.tsx index b355b1a..2ba1752 100644 --- a/src/entrypoints/App.tsx +++ b/src/entrypoints/App.tsx @@ -1,6 +1,5 @@ import { useCallback, useEffect, useReducer } from 'react'; import { RosViewer } from '@/features/viewer/RosViewer'; -import '../index.css'; function useLocationSearchSync() { const [, bump] = useReducer((n: number) => n + 1, 0); @@ -24,7 +23,7 @@ function App() { const syncLocationSearch = useLocationSearchSync(); const url = readSpaUrlFromQuery(); return ( -
+
= ({ data-language={language} data-theme={resolvedTheme} data-player-presence={playerPresence} - className={`w-full h-full ${resolvedTheme === 'dark' ? 'dark' : ''}`} + className={`rosview-root-shell ${resolvedTheme === 'dark' ? 'dark' : ''}`} > - - {children} - - +
+ + {children} + + +
); diff --git a/src/features/workspace/playback/PlaybackBar.tsx b/src/features/workspace/playback/PlaybackBar.tsx index b928440..b6539a3 100644 --- a/src/features/workspace/playback/PlaybackBar.tsx +++ b/src/features/workspace/playback/PlaybackBar.tsx @@ -486,19 +486,19 @@ export const PlaybackBar: React.FC = ({ player, extensionConte
diff --git a/src/index.css b/src/index.css index e75b67d..457b149 100644 --- a/src/index.css +++ b/src/index.css @@ -4,9 +4,9 @@ /* ── Scoped preflight (tailwind preflight: false in tailwind.config.js) ── Limited to #rosview-root so resets never touch the host page. - Only box-sizing is applied on * — do NOT zero borders globally; libraries - such as uPlot and Dockview rely on border-* for chrome (e.g. hover crosshair). - Border color for Tailwind utilities comes from `#rosview-root * { border-border }`. + Do not zero borders on every element: libraries such as uPlot and Dockview + rely on their own border chrome. Instead, initialize only Tailwind border + width utilities so classes like `border` / `border-b` are visible again. ─────────────────────────────────────────────────────────────────────── */ @layer base { #rosview-root *, @@ -19,6 +19,10 @@ --tw-content: ''; } #rosview-root { + width: 100%; + height: 100%; + min-width: 0; + min-height: 0; line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; @@ -33,6 +37,21 @@ font-size: inherit; font-weight: inherit; } + #rosview-root :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre) { + margin: 0; + } + #rosview-root :where(ol, ul, menu) { + list-style: none; + margin: 0; + padding: 0; + } + #rosview-root :where(fieldset) { + margin: 0; + padding: 0; + } + #rosview-root :where(legend) { + padding: 0; + } #rosview-root a { color: inherit; text-decoration: inherit; } #rosview-root b, #rosview-root strong { font-weight: bolder; } #rosview-root code, #rosview-root kbd, #rosview-root samp, #rosview-root pre { @@ -50,12 +69,16 @@ color: inherit; margin: 0; padding: 0; + border-width: 0; + border-style: solid; + border-color: hsl(var(--border)); } #rosview-root button, #rosview-root select { text-transform: none; } #rosview-root button, #rosview-root [type='button'], #rosview-root [type='reset'], #rosview-root [type='submit'] { + appearance: button; -webkit-appearance: button; background-color: transparent; background-image: none; @@ -65,7 +88,7 @@ #rosview-root progress { vertical-align: baseline; } #rosview-root ::-webkit-inner-spin-button, #rosview-root ::-webkit-outer-spin-button { height: auto; } - #rosview-root [type='search'] { -webkit-appearance: textbox; outline-offset: -2px; } + #rosview-root [type='search'] { appearance: textfield; -webkit-appearance: textbox; outline-offset: -2px; } #rosview-root ::-webkit-search-decoration { -webkit-appearance: none; } #rosview-root summary { display: list-item; } #rosview-root img, #rosview-root svg, #rosview-root video, @@ -76,6 +99,11 @@ } #rosview-root img, #rosview-root video { max-width: 100%; height: auto; } #rosview-root [hidden]:where(:not([hidden='until-found'])) { display: none !important; } + #rosview-root :where(.border, .border-x, .border-y, .border-t, .border-r, .border-b, .border-l) { + border-width: 0; + border-style: solid; + border-color: hsl(var(--border)); + } } @layer base { @@ -185,6 +213,16 @@ } @layer components { + #rosview-root .ros-playback-center-x { + transform: translateX(-50%); + translate: none; + } + + #rosview-root .ros-playback-center-xy { + transform: translate(-50%, -50%); + translate: none; + } + #rosview-root .loading-spinner { width: 32px; height: 32px;