[DataGrid] header focus outline has visual glitches

[Janpot]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-xtuj1s?file=Demo.tsx

Current behavior

1. Outline doesn't follow corner radius

2. outline doesn't quite seem to make it past the scrollbar

3. in both screenshots, the bottom border of the outline is missing as well.

Expected behavior

The outline follows the corner radius on both ends. the outline is closed at the bottom

Search keywords: datagrid header focus

[MartinTiangco]

In both screenshots, the outlines on the bottom side of the header cell are not visible. I would expect them to be.

[romgrk]

The top left border is an issue, but I'm not convinced the right-most cell border is.

If you go up and down the right-most column, the cell border extent stays constant; if we'd extend it to where the scrollbar space is, the border's dimension would jump up/down when going on the header. Making the right-most header cell larger would also bring complexity, because the width increase would necessarily need to be through padding (so the border extends), and we'd need to add a CSS rule specific for that cell, and if users try to add padding on their own they could mess up our padding.

[Janpot]

I've also added the missing bottom border to the issue, but I admit it's also debatable whether it's a problem or not.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@Janpot: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.