[@mantine/core] ButtonGroup: Fix overlap between buttons

[ryuhangyeong]

Example

Before

After

Suggest

I think it will look better if you fix the area between the button groups.

[rtivital]

It will make border thinner than expected on screens with high dpi

[ryuhangyeong]

I didn't realize that the screen I was looking at was of low spec.

How about using the formula below? Similar to the button border, I think you can change the size of the border between them.

'& + [data-button]': {
  [orientation === 'vertical' ? 'marginTop' : 'marginLeft']: -buttonBorderWidth / 2, // here
},

[rtivital]

Yeah, that might work for screens with high dpi, but I'm not sure if it will work correctly for regular screens. I've not explored much but we might need a media query to handle that – https://stackoverflow.com/a/58361747

[ryuhangyeong]

Strangely, the border size is not constant. I don't know if I can provide a consistent style through media queries.

[rtivital]

I think it should be 0.5 for high dpi and 1 for low dpi

[ryuhangyeong]

Is the code below correct what you want? The standard for high resolution is 300 dpi.

'& + [data-button]': {
  [orientation === 'vertical' ? 'marginTop' : 'marginLeft']: -buttonBorderWidth,
  '@media only screen and (min-resolution: 300dpi)': {
    [orientation === 'vertical' ? 'marginTop' : 'marginLeft']: -buttonBorderWidth / 2,
  },
},

[rtivital]

Not sure yet, let's have a look if it works correctly after you update a PR

[ryuhangyeong]

In my environment it looks like a photo. Can I check it in high definition? Code reflected in PR.

[rtivital]

I've updated media query to work correctly for high dpi, can you check that it works for low dpi?

[ryuhangyeong]

I'm a little confused as to whether I understood and tested what you are saying correctly. 🤔

this is the result of testing under the following conditions after lowering the dpi as much as possible in my Windows
environment.

buttonBorderWidth: >= 4

buttonBorderWidth: < 4

Is what I tested correct what you want??

[rtivital]

Seems to be correct, thanks!

[rtivital]

Thanks again, @ryuhangyeong!