search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.08k stars 1.26k forks source link

[data grid] Multi Column Sort Indicator Cut off when Column is narrow #13406

Closed httpete closed 2 months ago

httpete commented 3 months ago

Steps to reproduce

image

Current behavior

This is easily reproducible on the demo page from MUI/DataGrid.

Expected behavior

No response

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 sort indicator Order ID: 79357

michelengelen commented 3 months ago

@httpete thanks for raising this issue. I am actually not too sure if we can do something about that. Ideas @cherniavskii (and maybe @danilo-leal)?

michelengelen commented 3 months ago

@mui/xgrid thoughts?

romgrk commented 3 months ago

The width of the badge container would need to include the floating text. I think this is something that can only be fixed in the core, maybe there's already a bug report for this. Alternatively we could align the badge on the starting position of the text direction (left in LTR, right in RTL): https://mui.com/material-ui/react-badge/#badge-alignment, but this is a design change.

Not sure what's the best option.

michelengelen commented 3 months ago

@noraleonte would love to have your input on this design question. ^^

noraleonte commented 3 months ago

I wouldn't necessarily change the alignment of the badge 🤔 Feels a bit counter intuitive... From what I see, adding a marginRight to the iconButtonContainer when the badge is visible could fix this, but I don't know the codebase well enough to anticipate any side effects of that 🙈

I think this is something that can only be fixed in the core, maybe there's already a bug report for this.

I think we could open one if there isn't... seems to me like a pretty common issue

michelengelen commented 3 months ago

I tried a few things and some did look promising at first.

  1. moving the sorting icon out of the titleContainer => works, but the sorting icon now is not tagged to the title anymore, but sits next to the menu button
  2. wrapping the sorting icon in a separate div with some padding to the right => looks too wide without the badge
  3. changing badge alignment => just looks wrong

I am also not sure if the core team can do something about it. This is due to the fact that the titleContainer needs overflow: hidden to allow for the ellipsis to work.

michelengelen commented 3 months ago

I did add this to the board. Maybe we can come up with something collaboratively in the grooming session. 👍🏼

github-actions[bot] commented 2 months ago

:warning: 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.

@httpete: 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.