fix(css): stabilize scoped rosview styling

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",

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 (
-    <div className="w-screen h-screen">
+    <div style={{ width: '100vw', height: '100vh' }}>
       <RosViewer
         url={url}
         urlState="spa"

src/entrypoints/main.tsx

@@ -1,4 +1,5 @@
 import { createRoot } from 'react-dom/client';
+import './standalone.css';
 import '../index.css';
 import App from './App.tsx';
 

src/entrypoints/standalone.css

@@ -0,0 +1,16 @@
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  min-width: 320px;
+}
+
+body,
+p {
+  margin: 0;
+}

src/features/viewer/RosViewProvider.tsx

@@ -86,12 +86,14 @@ export const RosViewProvider: React.FC<RosViewProviderProps> = ({
         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' : ''}`}
       >
-        <IntlProvider locale={intlLocaleFor(language)} defaultLocale="en" messages={messages}>
-          {children}
-          <Toaster theme={resolvedTheme} />
-        </IntlProvider>
+        <div className="h-full w-full min-h-0 min-w-0">
+          <IntlProvider locale={intlLocaleFor(language)} defaultLocale="en" messages={messages}>
+            {children}
+            <Toaster theme={resolvedTheme} />
+          </IntlProvider>
+        </div>
       </div>
     </RosViewThemeContext.Provider>
   );

src/features/workspace/playback/PlaybackBar.tsx

@@ -486,19 +486,19 @@ export const PlaybackBar: React.FC<PlaybackBarProps> = ({ player, extensionConte
           <div
             ref={hoverLineRef}
             data-testid="playback-hover-line"
-            className="pointer-events-none absolute top-1/2 z-[2] h-6 w-px -translate-x-1/2 -translate-y-1/2 bg-primary/55 opacity-0"
+            className="ros-playback-center-xy pointer-events-none absolute top-1/2 z-[2] h-6 w-px bg-primary/55 opacity-0"
             style={{ left: '0%' }}
           />
           <div
             ref={thumbRef}
             data-testid="playback-thumb"
-            className="pointer-events-none absolute top-1/2 z-[3] h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary bg-background"
+            className="ros-playback-center-xy pointer-events-none absolute top-1/2 z-[3] h-3 w-3 rounded-full border border-primary bg-background"
             style={{ left: '0%' }}
           />
           <div
             ref={hoverTooltipRef}
             data-testid="playback-hover-time"
-            className="pointer-events-none absolute -top-8 z-10 -translate-x-1/2 rounded-md border border-border bg-popover px-2 py-1 text-[10px] font-mono text-popover-foreground opacity-0 shadow-lg"
+            className="ros-playback-center-x pointer-events-none absolute -top-8 z-10 rounded-md border border-border bg-popover px-2 py-1 text-[10px] font-mono text-popover-foreground opacity-0 shadow-lg"
             style={{ left: '0%' }}
           />
         </div>

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;