TanStackRouterDevtoolsPanel Is missing a css variables and appears broken #6196
Description
Which project does this relate to?
Router
Describe the bug
The devtools panel is looking a little rough without --tsrd-font-size set to 16px.
Further more, I think the devtools should mirror the API of tanstack query's devtools panel which seems a lot more polished than the router one. (missing onClose, but button to dismiss is always visible.)
Your Example Website or App
https://tanstack.com/router/latest/docs/framework/react/examples/basic-devtools-panel
Steps to Reproduce the Bug or Issue
You can just copy this example.
https://tanstack.com/router/latest/docs/framework/react/examples/basic-devtools-panel
To see the correct styling:
- wrap the devtool in a div with a ref
- add the following code to the component:
const ref = useRef<HTMLDivElement>(null)
useEffect(() => {
ref.current?.style.setProperty('--tsrd-font-size', '16px')
});
Expected behavior
I expect to see the same styling while using the panel as I would if I was using the "simple devtool"
Screenshots or Videos
No response
Platform
- Router / Start Version: [e.g. 1.121.0]
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Browser Version: [e.g. 91.1]
- Bundler: [e.g. vite]
- Bundler Version: [e.g. 7.0.0]
Additional context
No response