Modal dialog with `isCentered` has broken overflow

Description

Modal dialog with isCentered has broken overflow

Link to Reproduction

https://codesandbox.io/s/pensive-wu-6vi25?file=/src/index.js

Steps to reproduce

      <Modal isOpen={isOpen} isCentered>
        <ModalOverlay />
        <ModalContent>
          <ModalBody>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
            <Text>p</Text>
          </ModalBody>

Chakra UI Version

1.6.6

Browser

Google Chrome 94

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[llamadeus]

I just came across this issue and have the same problem with centered modals.

During my research I found out that the .chakra-modal__content-container has position: fixed and display: flex at the same time. This makes for strange positioning of the child elements when the content overflows.

Instead, I would suggest that the .chakra-modal__content-container container gets display: block and the .chakra-modal__content container gets another wrapper with display: flex and justify-content: center. This allows the browser to position the content correctly. The ModalContent component would have to change into something like this:

export const ModalContent = forwardRef<ModalContentProps, "section">(
  (props, ref) => {
    const { className, children, containerProps: rootProps, ...rest } = props

    const { getDialogProps, getDialogContainerProps } = useModalContext()

    const dialogProps = getDialogProps(rest, ref) as any
    const containerProps = getDialogContainerProps(rootProps)

    const _className = cx("chakra-modal__content", className)

    const styles = useModalStyles()

    const dialogStyles: SystemStyleObject = {
      display: "flex",
      flexDirection: "column",
      position: "relative",
      width: "100%",
      outline: 0,
      ...styles.dialog,
    }

    // <--- Styles for the flex wrapper --->
    const wrapperStyles: SystemStyleObject = {
      display: "flex",
      justifyContent: "center",
      // alignItems: "center", // based on `isCentered` prop
      // ...styles.wrapper, // opt-in to additional styles
    }

    const dialogContainerStyles: SystemStyleObject = {
      display: "block",
      width: "100vw",
      height: "100vh",
      "@supports(height: -webkit-fill-available)": {
        height: "-webkit-fill-available",
      },
      position: "fixed",
      left: 0,
      top: 0,
      ...styles.dialogContainer,
    }

    const { motionPreset } = useModalContext()

    return (
      <ModalFocusScope>
        <chakra.div
          {...containerProps}
          className="chakra-modal__content-container"
          // tabindex="-1" means that the element is not reachable via sequential keyboard navigation, @see #4686
          tabIndex={-1}
          __css={dialogContainerStyles}
        >
          {/* <--- Additional flex wrapper ---> */}
          <chakra.div
            className="chakra-modal__flex-wrapper"
            // tabindex="-1" means that the element is not reachable via sequential keyboard navigation, @see #4686
            tabIndex={-1}
            __css={wrapperStyles}
          >
            <ModalTransition
              preset={motionPreset}
              className={_className}
              {...dialogProps}
              __css={dialogStyles}
            >
              {children}
            </ModalTransition>
          </chakra.div>
        </chakra.div>
      </ModalFocusScope>
    )
  },
)

[segunadebayo]

I’m curious how a Centered modal with outside overflow would look like. I don’t think this use-case would result in a usable modal.

In my opinion, this is a rare use case, and would recommend using an inside overflow. Really hard to tweak the modal to match every use case out there.

Feel free to modify the components by passing style props to them. When you have a working solution, please post it here and I’ll take a look.

Thanks for understanding.

PS: I’ll update the docs to reflect this opinion