[Chip] Clickable area expands with `line-height`

[DiegoAndai]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-ryuspuxm?file=Demo.tsx
2. Click anywhere inside the black border box

Current behavior

The chip is clicked even though the pointer is outside the Chip.

Expected behavior

The chip should only be clicked when the pointer is inside the Chip.

Context

Found in mui/mui-x#16304

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.5
  Binaries:
    Node: 22.2.0 - ~/.nvm/versions/node/v22.2.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v22.2.0/bin/npm
    pnpm: 9.15.4 - ~/.nvm/versions/node/v22.2.0/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.265
    Edge: 132.0.2957.115
    Safari: 17.5
  npmPackages:
    @mui/material: 6.4.1

Search keywords: Chip line-height

[DiegoAndai]

I think this should be considered a bug; what do you think, @aarongarciah?

[aarongarciah]

@DiegoAndai yes. Looks like the .MuiChip-label element should have an explicit line-height to avoid inheritance.

[himani-mehra]

Hi @DiegoAndai , I'm interested in contributing to this issue. Could you please assign it to me? Looking forward to working on it!

[AlexShulgin000]

PR

[aarongarciah]

@AlexShulgin000 #45101 already exists tackling this same issue.

[codekesh]

Hi @DiegoAndai, I went through the issue and the fix made in PR #45101 . I wanted to check if this PR fully resolves the issue, or if further work is needed. Should I consider this resolved, or would it be helpful for me to explore it further?