`DrawerBody` becomes unscrollable in some conditions

[nick-y-ito]

Description

The DrawerBody component becomes unscrollable in some conditions, even though the example drawer is still scrollable.

Steps to Reproduce

1. Open your browser's developer tools and make the height of the viewport small enough.
2. Navigate the /foods page and click the add (+) button at the bottom right corner so the food addition drawer gets opened.
3. If the DrawerBody part is taller than the allowed height, it and the <DrawerFooter> are overflown.

https://github.com/nishiki-tech/nishiki-frontend/assets/99148565/97fe9fba-56be-47b4-a681-8433c5efad61

Environment

• OS: macOS Sonoma 14.2
• Browser: Google Chrome
• Device: MacBook Pro M2

Notes

-

[nick-y-ito]

I researched and figured out one fact:

Pattern 1: Wrapping the entire <DrawerContent> with <Form>

With this structure, the DrawerBody is scrollable. However, the form functionality does not work.

<DrawerRoot>
  <DrawerTrigger asChild></DrawerTrigger>
  <Form {...form}>
    <form onSubmit={form.handleSubmit(processSubmit)}>
      <DrawerContent side="bottom">
        <DrawerHeader></DrawerHeader>
        <DrawerBody></DrawerBody>
        <DrawerFooter></DrawerFooter>
      </DrawerContent>
    </form>
  </Form>
</DrawerRoot>;

https://github.com/nishiki-tech/nishiki-frontend/assets/99148565/a2b07c2d-139e-4916-98d1-af6000a39c2a

[nick-y-ito]

Pattern 2: Wrapping only the necessary parts with <Form>

With this structure, the functionalities of the form work, although the DrawerBody is not scrollable.

<DrawerRoot>
  <DrawerTrigger asChild></DrawerTrigger>
  <DrawerHeader></DrawerHeader>
  <DrawerContent side="bottom">
    <Form {...form}>
      <form onSubmit={form.handleSubmit(processSubmit)}>
        <DrawerBody></DrawerBody>
        <DrawerFooter></DrawerFooter>
      </form>
    </Form>
  </DrawerContent>
</DrawerRoot>;

https://github.com/nishiki-tech/nishiki-frontend/assets/99148565/fe1de875-cca8-449a-9e7e-aeb2957ba453