Unexpected margin removal in TypographyStylesProvider

[QuinnStraus]

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

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

The TypographyStylesProvider contains the following css selectors

& :first-child {
  margin-top: 0;
}

& :last-child {
  margin-bottom: 0;
}

These impact all elements that are either first or last within their container within the provider, and override any margin set on the top or bottom of any elements using a single class selector, since these selectors have higher specificity. This creates some unexpected behavior and also creates some issues with eg. the spoiler component, which adds margin-bottom to the container when the show or hide buttons are visible.

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

https://codesandbox.io/p/sandbox/mantine-react-template-forked-c8hv6r

Possible fix

Removing the selectors from the TypographyStylesProvider css file would solve the problem. From looking through the css file, it seems like these styles were added to remove the margin added to some items by the provider if they are first or last (specifically ul, ol, headers, img, p, hr, pre, table, caption, and blockquote). Filtering by these tags therefore should solve the problem.

Self-service

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