Small glitch when using a confirm modal without children

[sebastien-prudhomme]

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

What package has an issue?

@mantine/modals

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

Small visual glitch on the button focus when the confirm modal is not using children:

Sample code:

  const openResetConfirmModal = () => modals.openConfirmModal({
    centered: true,
    labels: {
      cancel: "Cancel",
      confirm: "Reset",
    },
    onConfirm: () => reset(),
    title: "Reset the form?",
    withCloseButton: false,
  });

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

No response

Possible fix

No response

Self-service

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

[stefanzmf]

This happens because of:

• modal header css has z-index: 1000; + some other css that overlaps everything
• highlighting button is done using outline so it is not taking space in box model but stays in place and it s getting overlapped by that header zindex

Not sure if it really worth adding some logic to fix this (if it worth, please let me know). It can be fixed on the spot using

groupProps: {
  style: { paddingTop: '4px' },
},

[Prasiddha22]

As we see there is the logic to add a margin bottom to the container wrapping the children.

As this is happening because of the modal header, when there is no children, there will not be margin-bottom ( present in the children container). So I think we might want to use the similar logic and add margin-top when there is no children just to level it up.
Please let me know if we differ in opinion.