[data grid] Decreasing the width of the last column in DataGridPro with pinned columns results in weird behaviour

[lgncyberh]

Steps to reproduce

Link to live example: https://codesandbox.io/s/dank-darkness-599h6y?file=/Demo.tsx

Steps:

1. Scroll all the way to the right
2. Decrease the width of any column

Current behavior

When the column size is decreased, while dragging the mouse to adjust the width, the last unpinned column's width stays fixed and a gap appears between the last unpinned column and the first pinned column. After the mouseup event, everything gets back into its place and the gap disappears.

Expected behavior

The last unpinned column's width should be fluid while dragging the mouse and take all the available space, or the pinned columns should move together with the other columns.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 13.5.2
  Binaries:
    Node: 20.5.1 - /opt/homebrew/bin/node
    Yarn: 3.5.1 - /opt/homebrew/bin/yarn
    npm: 9.8.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Edge: Not Found
    Safari: 16.6
  npmPackages:
    @emotion/react: ^11.9.3 => 11.11.1
    @emotion/styled: ^11.9.3 => 11.11.0
    @mui/base:  5.0.0-beta.8
    @mui/core-downloads-tracker:  5.14.1
    @mui/icons-material: ^5.14.1 => 5.14.1
    @mui/lab: ^5.0.0-alpha.137 => 5.0.0-alpha.137
    @mui/material: ^5.14.1 => 5.14.1
    @mui/private-theming:  5.13.7
    @mui/styled-engine:  5.13.2
    @mui/system: ^5.14.1 => 5.14.1
    @mui/types:  7.2.4
    @mui/utils:  5.14.1
    @mui/x-data-grid:  6.13.0
    @mui/x-data-grid-pro: ^6.10.1 => 6.13.0
    @mui/x-license-pro:  6.10.2
    @types/react: ~17.0.2 => 17.0.62
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2
    typescript: ~4.9.4 => 4.9.5

Search keywords: resizing width pinned
Order ID: 53911

[romgrk]

I'm not sure this is unexpected. I feel like implementing the UX you're describing could make the resize behavior jumpy. @mui/xgrid thoughts?

[cherniavskii]

This is the limitation of our column resize implementation.

Before the mouseup, we only resize DOM elements.
This works better in the case of non-pinned columns (the next column moves automatically).
With pinned columns, it works a bit worse, because they're rendered in a different container, and therefore non-pinned columns do not move until the mouseup.

Screen.Recording.2023-10-10.at.12.07.10.mov

@romgrk We might be able to improve it if we manage to implement column pinning without having pinned columns in separate containers.
We already have one reason to try doing that in #10339 (comment).
This issue appears to contribute to it 🙂.

[romgrk]

I'm already doing the pinned columns in the same container in #10059. Not sure if we should close this or keep open, but we should wait until the sticky layout change has landed before doing anything on this issue.

[cherniavskii]

Awesome, let's keep it open and close it once #10059 is merged 👍🏻