Mantine Tooltip Depends on --mantine-scale, which is not defined in HeadlessProvider

[lvgomes1]

Dependencies check up

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

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

7.11.0

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

All

Describe the bug

1. Use Mantine in Headless mode, use HeadlessMantineProvider
2. Import and use the Tooltip from mantine: import { Tooltip } from '@mantine/core'
3. Try and render the tooltip, set withArrow as true
4. Observe the html and see that the computed width and height is 0, since the CSS is always dependent on the --mantine-scale property. Even when setting any arrowSize, the width and height remains 0.

It seems the only way around this is if we add the following line:

import '@mantine/core/styles.css'

which might not be ideal for users of Mantine in Headless mode.

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

https://codesandbox.io/p/sandbox/mantine-react-template-forked-ls9jj9?file=%2Fsrc%2FApp.tsx%3A11%2C17

Possible fix

Possibly remove the dependency on --mantineScale for height and width. Or possibly allow users to pass in explicit height and width in stylesAPI, which may not be allowed at the moment.

Self-service

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

[rtivital]

Fixed in 7.11.1