[data grid] Insufficient top padding in toolbarContainer Component When Displaying Filter Badge

[michGreg]

Steps to reproduce

Steps:

1. Open this link to live example: https://mui.com/x/react-data-grid/filtering/
2. Set any filter

Current behavior

No response

Expected behavior

Display the entire badge component in the default setting

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: datagrid, toolbarContainer, toolbar, filter, badge

[michelengelen]

@KenanYusuf aren't you currently working on a toolbar rebrush?

For a workaround you can use this:

slotProps={{ baseBadge: { overlap: 'circular' } }}

[KenanYusuf]

Yes, this won't be a problem with the redesigned toolbar. I've created a PR #15556 which will allow you to override the props for the filter badge in the meantime.

[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.

Note

@michGreg 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.