[Drawer] Drawer height changes when placement is "bottom/top"

Bug report

Describe the bug

With <Drawer placement="bottom" size="md" />, the drawer height keeps growing as you add more content to DrawerBody, even though you have specified a md size.

To reproduce

1. Go to https://next.chakra-ui.com/docs/overlay/drawer#drawer-placement
2. Choose placement bottom
3. Add lots of content within DrawerBody
4. See the oversized panel

Minimal reproduction

Expected behavior

The Drawer should honor size and have a max-height when placement is bottom or top, just like it has max-width when placement is left or right

Screenshots

System information

• OS: [e.g. macOS, Windows]
• Browser (if applies): [e.g. Chrome, Safari]
• Version of @chakra-ui/core: [e.g. 1.0.0-rc.3]
• Version of Node.js: [e.g. 12.11.1]

Additional context

[binajmen]

Hi @ctpaulson,

I solved this using a hook largely inspired from https://usehooks.com/useWindowSize/:

import * as React from 'react'

type WindowSize = {
  width: number
  height: number
}

export default function useWindowSize() {
  // https://joshwcomeau.com/react/the-perils-of-rehydration/
  const [windowSize, setWindowSize] = React.useState<WindowSize>({
    width: 0,
    height: 0,
  })

  React.useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }

    window.addEventListener("resize", handleResize)
    handleResize()

    return () => window.removeEventListener("resize", handleResize)
  }, [])

  return windowSize
}

const { height } = useWindowSite()
...
      <Drawer placement="bottom" isOpen={isOpen} onClose={onClose}>
        <DrawerOverlay>
          <DrawerContent maxH={height}>

It works pretty well 😉

[ctpaulson]

@binajmen @imdongchen Here’s a workaround I figured out.

You can add a maxH attribute to the <DrawerContent> component, like so:

<Drawer
        isOpen={isOpen}
        placement="bottom"
        onClose={onClose}
        finalFocusRef={btnRef}
      >
        <DrawerOverlay>
          <DrawerContent maxH="75vh">
            <DrawerCloseButton />
            <DrawerHeader>Create your account</DrawerHeader>

            <DrawerBody>
              <Input placeholder="Type here..." />
            </DrawerBody>

            <DrawerFooter>
              <Button variant="outline" mr={3} onClick={onClose}>
                Cancel
              </Button>
              <Button colorScheme="blue">Save</Button>
            </DrawerFooter>
          </DrawerContent>
        </DrawerOverlay>
      </Drawer>

You can use either vh units if you want the drawer to take up a certain portion of the viewport height, or hardcode a px value.