TanStackRouterDevtoolsPanel Is missing a css variables and appears broken

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:

1. wrap the devtool in a div with a ref
2. 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

Start with the linked basic-devtools-panel example and reproduce the styling without manually setting --tsrd-font-size. Compare the panel’s public behavior with TanStack Query’s devtools panel, focusing on the missing onClose behavior and always-visible dismiss button. Done means the panel has the expected styling and matching dismissal controls.