iosでキーボード表示時にモーダルのサイズが変わるようにする

Author: na-trium-144

app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata, Viewport } from "next";
+import type { Metadata } from "next";
 import "@fontsource-variable/inconsolata";
 // import "@fontsource/m-plus-rounded-1c/400.css";
 // import "@fontsource/m-plus-rounded-1c/700.css";
@@ -14,12 +14,6 @@ import { SidebarMdProvider } from "./sidebar";
 import { RuntimeProvider } from "./terminal/runtime";
 import { getPagesList } from "@/lib/docs";
 
-export const viewport: Viewport = {
-  width: "device-width",
-  initialScale: 1,
-  interactiveWidget: "resizes-content",
-};
-
 export const metadata: Metadata = {
   title: {
     template: "%s - my.code();",

app/terminal/modal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import clsx from "clsx";
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 
 interface Props {
   className?: string;
@@ -14,6 +14,7 @@ interface Props {
 export function Modal(props: Props) {
   const [daisyModalEnabled, setDaisyModalEnabled] = useState(false);
   const [daisyModalOpen, setDaisyModalOpen] = useState(false);
+  const modalDivRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (props.open) {
       // daisyuiのmodalモードにする → modalを開くアニメーションをする
@@ -27,6 +28,22 @@ export function Modal(props: Props) {
       return () => clearTimeout(timeout);
     }
   }, [props.open]);
+  useEffect(() => {
+    if (daisyModalEnabled) {
+      const updateHeight = () => {
+        if (modalDivRef.current && window.visualViewport) {
+          modalDivRef.current.style.height = `${window.visualViewport.height}px`;
+        }
+      };
+      updateHeight();
+      window.addEventListener("resize", updateHeight);
+      return () => window.removeEventListener("resize", updateHeight);
+    } else {
+      if (modalDivRef.current) {
+        modalDivRef.current.style.height = "";
+      }
+    }
+  }, [daisyModalEnabled]);
 
   return (
     <>
@@ -39,6 +56,7 @@ export function Modal(props: Props) {
       <div
         className={clsx(daisyModalEnabled && "modal h-dvh")}
         role={daisyModalEnabled ? "dialog" : undefined}
+        ref={modalDivRef}
       >
         <div
           className={clsx(