Modal with fixed footer (content height support)

[andkorsh]

It seems there is currently (as of 8.3.13) no way to specify a modal content height. The Modal component props type does have h property which seemingly does not have any effect. It could be beneficial to have the ability to specify the modal type mainly to have a fixed (always visible) footer.

One way to achieve the fixed footer currently is to specify height and max-height on the body container:

<Modal opened onClose={null}>
  <Stack w="100%" h="40rem" mah="60vh">
    <Box style={{ flex: 1 }} />
    <Box h="3rem" bg="red" />
  </Stack>
</Modal>

The problem with this approach is that it is necessary to specify max-height - without it, the modal container will have the scroll on smaller screens which we're trying to avoid. Specifying max-height, however, is problematic. Using 'vh' units doesn't really work here. What max-height would need to be is 100vh - 2*offset - header height; and while it's possible to calculate the 2*offset, the header height is unknown and variable.

There is another way to make it work, which is near-perfect:

const theme = createTheme({
  components: {
    Modal: Modal.extend({
      styles: (_, props) => {
        if (!props.h) return null;

        return {
          content: {
            display: "flex",
            flexDirection: "column",
            height: props.h as string,
          },
          body: { flex: 1, minHeight: 0 },
        };
      },
    }),
  },
});

<Modal opened onClose={null} h="40rem">
  <Stack w="100%" h="100%">
    <Box style={{ flex: 1 }} />
    <Box h="3rem" bg="red" />
  </Stack>
</Modal>

This approach gives exactly the desired behavior with minimal configuration. The only caveat is that the h property is automatically passed down to the DOM (assigned to mantine-Modal-root element) where it doesn't really do anything at all - just a bit 'hacky'.

I have also tried extending the props and use contentHeight instead of h:

declare module "@mantine/core" {
  interface ModalProps {
    contentHeight?: string;
  }
}

But this gives a react warning React does not recognize the contentHeight prop on a DOM element therefore I had abandoned this idea.

Anyhow, in this feature request I'm suggesting adding contentHeight property to Modal component which, if specified, would convert modal 'content' into a flexbox.

If this request is approved, I can provide a pull request - please let me know if this is helpful. In the meantime, we can live with the 'hacky' h-prop approach.

thanks!

[andkorsh]

upd: Using h messes up with a body scroll, since it also sets the height of the parent container. I had to switch back to the contentHeight approach but this time named it contentheight to avoid React error. Full error text:

React does not recognize the contentHeightprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasecontentheight instead.

Since I don't care if contentheight is on a DOM element or not, this workaround is acceptable for now.