[@mantine/core] Group Component -> Issues with gaps/spacing

[cx0onl]

Hello together!

First of all congratulations and thanks for Mantine! This is by far the best library for React out there!

I use the Group component very often in my UI. In doing so, I have noticed several bugs:

1.) An unwanted gap is inserted after the last item. Therefore the items do not use the whole available width.

2.) With the combination of "grow" and "apart" the spacings between the items are no longer correct.

I would expect both variants ("left/grow" and "apart/grow") to give the same result: Three items of equal (grown) width with two correct spacings in between.

Thanks!

• What package version are you using? 3.2.1
• In which browser and operating system issue occurred? Windows 11, Chrome
• If possible please attach link to codesandbox with reproduced issue: https://mantine.dev/core/group/

[rtivital]

Hi @cx0onl, thanks for reporting! I cannot think of a way we can fix it on our side, as it seems to be a browser behavior. Maybe you have any ideas?

[cx0onl]

It looks like the problem is comming from the calculation of the child width.

For each child element, the spacing is subtracted. 3 children = 3 gaps. This is wrong.

https://github.com/mantinedev/mantine/blob/557594325b2c14158e12e8b9bfaef6096ed17f71/src/mantine-core/src/components/Group/Group.styles.ts#L40

[cx0onl]

@rtivital You added this lines in July: https://github.com/mantinedev/mantine/commit/53d903fd888fab38ea577a193a10e2865a3f4333

[cx0onl]

calc(${100 / count}% - ${(count - 1/count) * theme.fn.size({ size: spacing, sizes: theme.spacing })}px)

Mayby this should fix it? Only add count - 1 / count (eg. 2/3) spacing to each child.

[rtivital]

I've released a patch 3.2.2 with a fix, can you please update and see if it works for you?

[cx0onl]

Yes. Now it works like a charm. :-)

Issue is closed.