fix(modal): modal position when keyboard appears (#3691)

* feat(theme): add h-[--visual-viewport-height] to modal wrapper

* fix(modal): apply --visual-viewport-height

* chore(changeset): add changeset

.changeset/seven-apricots-happen.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/modal": patch
+"@nextui-org/theme": patch
+---
+
+adjust modal position when keyboard appears (#2837)

packages/components/modal/src/modal-content.tsx

@@ -8,7 +8,7 @@ import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {CloseIcon} from "@nextui-org/shared-icons";
 import {domAnimation, LazyMotion, m} from "framer-motion";
 import {useDialog} from "@react-aria/dialog";
-import {chain, mergeProps} from "@react-aria/utils";
+import {chain, mergeProps, useViewportSize} from "@react-aria/utils";
 import {HTMLNextUIProps} from "@nextui-org/system";
 import {KeyboardEvent} from "react";
 
@@ -42,6 +42,8 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
 
   const Component = as || DialogComponent || "div";
 
+  const viewport = useViewportSize();
+
   const {dialogProps} = useDialog(
     {
       role,
@@ -97,8 +99,18 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
+  // set the height dynamically to avoid keyboard covering the bottom modal
+  const viewportStyle = {
+    "--visual-viewport-height": viewport.height + "px",
+  };
+
   const contents = disableAnimation ? (
-    <div className={slots.wrapper({class: classNames?.wrapper})} data-slot="wrapper">
+    <div
+      className={slots.wrapper({class: classNames?.wrapper})}
+      data-slot="wrapper"
+      // @ts-ignore
+      style={viewportStyle}
+    >
       {content}
     </div>
   ) : (
@@ -111,6 +123,8 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
         initial="exit"
         variants={scaleInOut}
         {...motionProps}
+        // @ts-ignore
+        style={viewportStyle}
       >
         {content}
       </m.div>

packages/core/theme/src/components/modal.ts

@@ -32,6 +32,7 @@ const modal = tv({
       "z-50",
       "overflow-x-auto",
       "justify-center",
+      "h-[--visual-viewport-height]",
     ],
     base: [
       "flex",