DevTools panel direction in RTL pages

[m0bar3z]

When I install DevTools in my project where the page direction is set to RTL (right-to-left), the DevTools panel order gets messed up, making it hard to read and use. Wouldn't it be better to force the DevTools panel to stay in LTR (left-to-right) regardless of the page direction?

[aminlotfi]

I encountered the same issue with the React Query DevTools panel in RTL pages, where the panel's layout becomes confusing and hard to use.

As a temporary fix in my project, I wrapped the DevTools component in a <div> with dir="ltr" like this:

<QueryClientProvider client={queryClient}>
      {children}
      {process.env.NODE_ENV === 'development' && (
        <div dir='ltr'>
          <ReactQueryDevtools initialIsOpen={false} />
        </div>
      )}
</QueryClientProvider>

This forces the DevTools panel to render in LTR, regardless of the page's direction, and resolves the issue for now.

I believe a more permanent fix in the library itself would be beneficial. I’d also love to contribute to addressing this issue. Could someone guide me if there are any preferences or specific constraints for implementing this?