Badge changed from inline to block element in 7.12.1

[codyebberson]

Dependencies check up

• [X] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.12.1

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

Historically, the <Badge> component has been inline (as recently as 7.12.0).

PR #6629 changed the default display: inline-flex; to display: grid;

As a result, the <Badge> component is now a block element that renders on a separate line, rather than inline with surrounding text.

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantine-react-template-forked-h6nz7y?workspaceId=864c2f33-ed0a-40ed-8284-c63d6dee1bc2

Possible fix

Change display: grid to display: inline-grid ?

Self-service

• [X] I would be willing to implement a fix for this issue

[codyebberson]

Note that this open PR is modifying the same files, and may indirectly fix the issue: https://github.com/mantinedev/mantine/pull/6680

[rtivital]

Fixed in 7.12.2

[artemik]

@rtivital Hi. I'm lazy to open a new issue, but want to note that while changing grid to inline-grid might have fixed something for somebody, it still breaks padding for me. The text now is being pushed somewhat to the bottom, if I apply some padding to the badge (padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);).

For me, I fixed it by forcing inline-flex back. But wonder if that's something you'd like to fix by default.