fix: Column separator can get hidden when resizing columns in DataGrid

[msb-incom]

🐛 Bug Report

When resizing columns in a resizable DataGrid, the column separators can become hidden making it impossible to re-extend the columns without refreshing the page.

💻 Repro or Code Sample

This is reproducible in the samlples at https://www.fluentui-blazor.net/DataGrid

🤔 Expected Behavior

I would expect the separators to stay visible so I can always resize a column back to its original width.

😯 Current Behavior

When making a column narrower, I can do it to a point where the separator becomes invisible. Doing so will make me unable to re-size the column.

💁 Possible Solution

I believe this can be fixed by making the drag-handle sticky in its position.

🔦 Context

Possible bad user-experience when using the resizable columns feature of the DataGrid component.

🌍 Your Environment

• OS & Device: Windows
• Browser: Microsoft Edge
• .NET 8.0.2 and Fluent UI Blazor library 4.7.2

[vnbaaij]

If you have a concrete solution that we can implement, that would be great. I was not able to get it fixed.
PR provided.

With one of the latest releases we introduced resizing per keyboard. + and - will increase/decrease focused column width in steps of 10 pixels. More importantly in your case, Shift+r will reset all widths to their default initial value. No need to refresh the page!

[msb-incom]

Hi @vnbaaij
Thanks for the shortcut tip! Wasn't aware 🙏 I submitted a PR that I believe fixes the issue. I'm no master of CSS, so I'm not entirely aware of other consequences it might bring, but I couldn't find any issues 🙂

[vnbaaij]

Will test with your PR. Thanks

[vnbaaij]

PR merged. Will be in next release