[data grid] Column pinning broken in RTL mode

[cherniavskii]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/unqmnxtw?file=src%2FDemo.tsx
2. Scroll horizontally

Current behavior

Pinned columns content is overflowing the column, the unpinned columns are visible through the pinned columns.

Expected behavior

No content overflow in pinned columns, pinned columns shouldn't have transparent background color.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: column pinning, rtl

[cherniavskii]

Regression introduced in https://github.com/mui/mui-x/releases/tag/v8.13.0, most probably by #16476

v8.13.0: https://stackblitz.com/edit/unqmnxtw-zkvud3eb?file=src%2FDemo.tsx,package.json
v8.12.0: https://stackblitz.com/edit/unqmnxtw-zdzckvwa?file=src%2FDemo.tsx,package.json

[cherniavskii]

UPD: I've updated the demo to use stylis rtl plugin, following the Material UI RTL guide:
https://stackblitz.com/edit/unqmnxtw-kmytmoed?file=index.html,src%2FDemo.tsx

With that setup, there's no issues with column pinning in RTL mode.
Switching between LTR and RTL is still broken though, not sure why.