DataGridPro: Pinned column header (that's not in a group) covers other non-grouped column headers next to it (when there are some other column groups)

[vladyslav-n]

Order ID or Support key 💳 (optional)

66195

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/stoic-morning-cnpmzf?file=/demo.tsx

Steps:
Pin either of the first non-group columns in DataGridPro and see how they are covering with white section other non-group header cells next to them.

It is also reproducible on the MUI docs page.

Current behaviour 😯

Screen.Recording.2023-06-09.at.15.33.40.mov

When you have some column groups but first columns on the left are actually non-group columns (at least 2 non-group columns in a row) if you pin any of the start non-group columns, their header cells expand so that they cover other non-group header cells next to them.

Expected behaviour 🤔

Pinned columns should work exactly the same way as when there are no groups or when you pin a non-group column from bet

ween groups.

Context 🔦

We're now extensively using DataGridPro with both grouping and pinning functionality, so we need to having this stuff work together in a very flexible way.

Your environment 🌎

npx @mui/envinfo

 System:
    OS: macOS 13.3.1
  Binaries:
    Node: 18.8.0 - ~/.nvm/versions/node/v18.8.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.18.0 - ~/.nvm/versions/node/v18.8.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.4

[MBilalShafi]

Thanks for reporting, a similar issue (for right pinned columns) is already in our backlog: #7041
Both of them are interrelated and could be fixed together.