[data grid] Header Filters overlap with data in compact density

[lukedukeus]

Steps to reproduce

Link to live example

Steps:

1. Type in a header filter
2. See how it overlaps:
   

Current behavior

Currently, the textbox's filter label overlaps with the column header, and the bottom of the textbox overlaps with the datagrid rows.

Expected behavior

I would expect the header filters to be <TextInput size='small' /> when the density is compact

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.15.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @emotion/react: ^11.11.0 => 11.11.4
    @emotion/styled: ^11.11.0 => 11.11.5
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.16.6
    @mui/icons-material: ^5.16.6 => 5.16.6
    @mui/lab: ^5.0.0-alpha.173 => 5.0.0-alpha.173
    @mui/material: ^5.16.6 => 5.16.6
    @mui/private-theming:  5.16.6
    @mui/styled-engine:  5.16.6
    @mui/system: ^5.16.6 => 5.16.6
    @mui/types:  7.2.15
    @mui/utils:  5.16.6
    @mui/x-data-grid: ^7.11.1 => 7.11.1
    @mui/x-data-grid-premium: ^7.11.1 => 7.11.1
    @mui/x-data-grid-pro:  7.11.1
    @mui/x-date-pickers:  7.11.1
    @mui/x-date-pickers-pro: ^7.11.1 => 7.11.1
    @mui/x-internals:  7.11.1
    @mui/x-license: ^7.11.1 => 7.11.1
    @mui/x-tree-view: ^7.11.1 => 7.11.1
    @types/react: ^18.0.28 => 18.2.74
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.0.4 => 5.4.3

Search keywords: headerFilters density

Search keywords:

[lukedukeus]

Found a workaround - you can manually set the header filter height. Not sure if this is a bug, but it would be cool if it defaulted to a height based on the density without setting it manually.

For now, what I am doing:

<DataGridPremium
      headerFilters
      density={density}
      headerFilterHeight={density=== 'compact' ? 75 : 45}
/>

[michelengelen]

Hey @lukedukeus ... that's a nice workaroud. There is an issue already about this, so I'll close this as a duplicate! Thanks for raising it and sharing your workaround!

[michelengelen]

Closing as duplicate of #13048

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

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