diff --git a/app/[lang]/[pageId]/pageContent.tsx b/app/[lang]/[pageId]/pageContent.tsx
index fd8ac655..ac91c2bd 100644
--- a/app/[lang]/[pageId]/pageContent.tsx
+++ b/app/[lang]/[pageId]/pageContent.tsx
@@ -107,7 +107,7 @@ export function PageContent(props: PageContentProps) {
             <StyledMarkdown
               content={section.rawContent.replace(
                 /-repl\s*\n/,
-                `-repl:${section.id}`
+                `-repl:${section.id}\n`
               )}
             />
           </div>
diff --git a/app/[lang]/[pageId]/styledSyntaxHighlighter.tsx b/app/[lang]/[pageId]/styledSyntaxHighlighter.tsx
index 95dcfe5d..663c29af 100644
--- a/app/[lang]/[pageId]/styledSyntaxHighlighter.tsx
+++ b/app/[lang]/[pageId]/styledSyntaxHighlighter.tsx
@@ -6,6 +6,7 @@ import {
   tomorrowNight,
 } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { lazy, Suspense, useEffect, useState } from "react";
+import clsx from "clsx";
 
 // SyntaxHighlighterはファイルサイズがでかいので & HydrationErrorを起こすので、SSRを無効化する
 const SyntaxHighlighter = lazy(() => {
@@ -136,7 +137,12 @@ export function StyledSyntaxHighlighter(props: {
 }
 function FallbackPre({ children }: { children: string }) {
   return (
-    <pre className="border-2 border-current/20 mx-2 my-2 rounded-box p-4! bg-base-300! text-base-content!">
+    <pre
+      className={clsx(
+        "border-2 border-current/20 mx-2 my-2 rounded-box p-4! bg-base-300! text-base-content!",
+        "w-full overflow-auto"
+      )}
+    >
       {children}
     </pre>
   );
diff --git a/app/globals.css b/app/globals.css
index 3df07768..916158d9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -115,6 +115,13 @@ mycdark:
   @apply border-primary!;
 }
 
+.rounded-box-modal {
+  @apply rounded-box;
+  @variant max-md {
+    --radius-box: 0px !important;
+  }
+}
+
 /* CDNからダウンロードするURLを指定したらなんかエラー出るので、npmでインストールしてlayout.tsxでimportすることにした */
 @theme {
   /*
diff --git a/app/sidebar.tsx b/app/sidebar.tsx
index 6aead65e..41cffbcd 100644
--- a/app/sidebar.tsx
+++ b/app/sidebar.tsx
@@ -118,7 +118,7 @@ export function Sidebar({ pagesList }: { pagesList: LanguageEntry[] }) {
   }, [currentLangIndex]);
 
   return (
-    <div className="bg-base-200 h-full w-80 overflow-y-auto">
+    <div className="bg-base-200 h-full w-80 flex flex-col">
       <h2 className="hidden lg:flex flex-row items-center p-4 gap-2">
         {/* サイドバーが常時表示されているlg以上の場合のみ */}
         <Link href="/" className="flex-1 flex items-center">
@@ -136,7 +136,7 @@ export function Sidebar({ pagesList }: { pagesList: LanguageEntry[] }) {
         <label
           htmlFor="drawer-toggle"
           aria-label="open sidebar"
-          className="btn btn-ghost"
+          className="btn btn-ghost w-full justify-start"
         >
           <svg
             className="w-8 h-8"
@@ -156,7 +156,16 @@ export function Sidebar({ pagesList }: { pagesList: LanguageEntry[] }) {
         </label>
       </span>
 
-      <ul className="menu w-full">
+      <ul
+        className="menu w-full h-max flex-nowrap grow-1 overflow-y-auto overflow-x-clip"
+        style={{
+          scrollbarGutter: "stable",
+          // DaisyUIはスクロールバーカラーを変更しているが、sidebarを開いた際にはさらに暗い色に変更してしまう
+          // ここではsidebarの状態によらずDaisyUIがデフォルトで設定しているスクロールバーカラーを復元
+          scrollbarColor:
+            "color-mix(in oklch, currentColor 35%, transparent) transparent",
+        }}
+      >
         {pagesList.map((group, i) => (
           <li key={group.id}>
             <details
diff --git a/app/terminal/editor.tsx b/app/terminal/editor.tsx
index 4def9eda..8b05070d 100644
--- a/app/terminal/editor.tsx
+++ b/app/terminal/editor.tsx
@@ -6,6 +6,7 @@ import { useChangeTheme } from "@/themeToggle";
 import { useEmbedContext } from "./embedContext";
 import { langConstants } from "./runtime";
 import { MarkdownLang } from "@/[lang]/[pageId]/styledSyntaxHighlighter";
+import { MinMaxButton, Modal } from "./modal";
 
 // https://github.com/securingsincity/react-ace/issues/27 により普通のimportができない
 const AceEditor = lazy(async () => {
@@ -104,18 +105,38 @@ export function EditorComponent(props: EditorProps) {
   }, [files, props.filename, props.initContent, writeFile]);
 
   const [fontSize, setFontSize] = useState<number>();
+  const [windowHeight, setWindowHeight] = useState<number>(1000);
   const [initAce, setInitAce] = useState(false);
   useEffect(() => {
-    setFontSize(
-      parseFloat(getComputedStyle(document.documentElement).fontSize)
-    ); // 1rem
-    setInitAce(true);
+    const update = () => {
+      setFontSize(
+        parseFloat(getComputedStyle(document.documentElement).fontSize)
+      ); // 1rem
+      setWindowHeight(window.innerHeight);
+      setInitAce(true);
+    };
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
   }, []);
-  // 最小8行 or 初期内容+1行
-  const editorHeight = Math.max(props.initContent.split("\n").length + 1, 8);
+  // 現在の内容の行数、最小8行、最大50vh
+  const editorHeight = Math.max(
+    Math.min(
+      code.split("\n").length,
+      Math.floor((windowHeight * 0.5) / ((fontSize || 16) + 1))
+    ),
+    8
+  );
+
+  const [isModal, setIsModal] = useState(false);
 
   return (
-    <div className="border border-accent border-2 shadow-md m-2 rounded-box overflow-hidden">
+    <Modal
+      id={`edit-${props.filename}`}
+      className={clsx("overflow-hidden", "flex flex-col")}
+      open={isModal}
+      setOpen={setIsModal}
+    >
       <div className="flex flex-row items-center bg-base-200">
         <span className="mt-2 mb-1 ml-3 mr-2 text-sm text-left">
           <span>
@@ -127,9 +148,7 @@ export function EditorComponent(props: EditorProps) {
         </span>
         <button
           className={clsx(
-            "btn btn-xs btn-soft btn-warning mt-1 mb-1",
-            // btn-warning は文字色を変えるがsvgの色は変えてくれないので、 stroke-warning を追加指定している
-            "stroke-warning hover:stroke-warning-content active:stroke-warning-content",
+            "btn btn-sm btn-soft btn-warning my-1",
             // codeの内容が変更された場合のみ表示する
             (props.readonly || code == props.initContent) && "invisible"
           )}
@@ -140,6 +159,7 @@ export function EditorComponent(props: EditorProps) {
             className="w-3 h-3"
             viewBox="0 0 24 24"
             fill="none"
+            stroke="currentColor"
             xmlns="http://www.w3.org/2000/svg"
           >
             <g id="Edit / Undo">
@@ -153,8 +173,10 @@ export function EditorComponent(props: EditorProps) {
               />
             </g>
           </svg>
-          元の内容に戻す
+          <span className="hidden md:inline">元の内容に戻す</span>
         </button>
+        <div className="flex-1" />
+        <MinMaxButton open={isModal} id={`edit-${props.filename}`} />
       </div>
       {fontSize !== undefined && initAce ? (
         <Suspense
@@ -168,7 +190,7 @@ export function EditorComponent(props: EditorProps) {
             theme={theme}
             tabSize={langConstants(props.language || "text").tabSize}
             width="100%"
-            height={editorHeight * (fontSize + 1) + "px"}
+            height={isModal ? "100%" : editorHeight * (fontSize + 1) + "px"}
             className="font-mono!" // Aceのデフォルトフォントを上書き
             readOnly={props.readonly}
             fontSize={fontSize}
@@ -182,18 +204,22 @@ export function EditorComponent(props: EditorProps) {
           />
         </Suspense>
       ) : (
-        <FallbackPre editorHeight={editorHeight}>{code}</FallbackPre>
+        <FallbackPre isModal={isModal} editorHeight={editorHeight}>
+          {code}
+        </FallbackPre>
       )}
-    </div>
+    </Modal>
   );
 }
 
 function FallbackPre({
   children,
   editorHeight,
+  isModal,
 }: {
   children: string;
   editorHeight: number;
+  isModal?: boolean;
 }) {
   // AceEditorはなぜかline-heightが小さい
   // fontSize + 1px になるっぽい?
@@ -201,7 +227,7 @@ function FallbackPre({
     <pre
       className="font-mono overflow-auto bg-base-300 px-2 cursor-wait"
       style={{
-        height: `calc((1em + 1px) * ${editorHeight})`,
+        height: isModal ? "100%" : `calc((1em + 1px) * ${editorHeight})`,
         lineHeight: "calc(1em + 1px)",
       }}
     >
diff --git a/app/terminal/exec.tsx b/app/terminal/exec.tsx
index 7e7b34e3..4b01e724 100644
--- a/app/terminal/exec.tsx
+++ b/app/terminal/exec.tsx
@@ -1,17 +1,18 @@
 "use client";
 
 import {
+  calculateRows,
   clearTerminal,
-  getRows,
   hideCursor,
   systemMessageColor,
   useTerminal,
 } from "./terminal";
 import { writeOutput } from "./repl";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useEmbedContext } from "./embedContext";
 import { RuntimeLang, useRuntime } from "./runtime";
 import clsx from "clsx";
+import { MinMaxButton, Modal } from "./modal";
 
 interface ExecProps {
   /*
@@ -23,8 +24,34 @@ interface ExecProps {
   content: string;
 }
 export function ExecFile(props: ExecProps) {
+  // ターミナルの行数を計算するためのstate
+  const [contents, setContents] = useState(props.content + "\n");
+  const [isModal, setIsModal] = useState(false);
+  const [fontSize, setFontSize] = useState<number>();
+  const [windowHeight, setWindowHeight] = useState<number>(1000);
+  useEffect(() => {
+    const update = () => {
+      setFontSize(
+        parseFloat(getComputedStyle(document.documentElement).fontSize)
+      ); // 1rem
+      setWindowHeight(window.innerHeight);
+    };
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+  const getRows = useCallback(
+    (cols: number) =>
+      isModal
+        ? "fit"
+        : Math.min(
+            calculateRows(contents, cols),
+            Math.floor((windowHeight * 0.2) / ((fontSize || 16) * 1.2))
+          ),
+    [contents, isModal, fontSize, windowHeight]
+  );
   const { terminalRef, terminalInstanceRef, termReady } = useTerminal({
-    getRows: (cols: number) => getRows(props.content, cols) + 1,
+    getRows,
     onReady: () => {
       hideCursor(terminalInstanceRef.current!);
       for (const line of props.content.split("\n")) {
@@ -32,7 +59,8 @@ export function ExecFile(props: ExecProps) {
       }
     },
   });
-  const { files, clearExecResult, addExecOutput, writeFile } = useEmbedContext();
+  const { files, clearExecResult, addExecOutput, writeFile } =
+    useEmbedContext();
 
   const { ready, runFiles, getCommandlineStr, runtimeInfo, interrupt } =
     useRuntime(props.language);
@@ -50,6 +78,7 @@ export function ExecFile(props: ExecProps) {
         // TODO: 1つのファイル名しか受け付けないところに無理やりコンマ区切りで全部のファイル名を突っ込んでいる
         const filenameKey = props.filenames.join(",");
         clearExecResult(filenameKey);
+        setContents("");
         let isFirstOutput = true;
         await runFiles(props.filenames, files, (output) => {
           if (output.type === "file") {
@@ -70,8 +99,13 @@ export function ExecFile(props: ExecProps) {
             null, // ファイル実行で"return"メッセージが返ってくることはないはずなので、Prismを渡す必要はない
             props.language
           );
+          setContents((prev) => prev + output.message + "\n");
         });
         setExecutionState("idle");
+        if (isFirstOutput) {
+          // If there was no output, clear the "実行中です..." message
+          clearTerminal(terminalInstanceRef.current!);
+        }
       })();
     }
   }, [
@@ -88,14 +122,20 @@ export function ExecFile(props: ExecProps) {
   ]);
 
   return (
-    <div className="border border-accent border-2 shadow-md m-2 rounded-box relative">
-      <div className="bg-base-200 flex items-center rounded-t-box">
+    <Modal
+      id={`exec-${props.filenames.join("-")}`}
+      className={clsx("relative", "flex flex-col", "isolate")}
+      open={isModal}
+      setOpen={setIsModal}
+    >
+      <div className="bg-base-200 flex w-full overflow-x-clip overflow-y-visible items-center rounded-t-box">
         <button
           /* daisyuiのbtnはheightがvar(--size)で固定。
           ここでは最小でそのサイズ、ただし親コンテナがそれより大きい場合に大きくしたい
           → heightを解除し、min-heightをデフォルトのサイズと同じにする */
           className={clsx(
-            "btn btn-soft btn-accent h-[unset]! min-h-(--size) self-stretch",
+            "btn btn-soft h-[unset]! min-h-(--size) self-stretch",
+            executionState === "idle" ? "btn-accent" : "btn-error",
             "rounded-none rounded-tl-[calc(var(--radius-box)-2px)]"
           )}
           onClick={() => {
@@ -124,13 +164,16 @@ export function ExecFile(props: ExecProps) {
             )
           }
         >
-          {executionState === "idle" ? "▶ 実行" : "■ 停止"}
+          {executionState === "idle" ? (
+            <StartButtonContent />
+          ) : (
+            <StopButtonContent />
+          )}
         </button>
         <code className="text-left break-all text-sm my-1 ml-4">
           {getCommandlineStr?.(props.filenames)}
         </code>
         <div className="ml-1 mr-1 tooltip tooltip-secondary tooltip-bottom z-1">
-          {/*なぜかわからないがz-1がないと後ろに隠れてしまう*/}
           <div className="tooltip-content bg-secondary/60 backdrop-blur-xs">
             ブラウザ上で動作する
             <span className="mx-0.5">
@@ -157,15 +200,18 @@ export function ExecFile(props: ExecProps) {
             ？
           </button>
         </div>
+        <div className="flex-1" />
+        <MinMaxButton open={isModal} id={`exec-${props.filenames.join("-")}`} />
       </div>
-      <div className="bg-base-300 p-4 pr-1 pt-2 relative rounded-b-box">
+      <div className="flex-1 w-full overflow-hidden bg-base-300 p-4 pr-1 pt-2 relative rounded-b-box">
         {/*
       ターミナル表示の初期化が完了するまでの間、ターミナルは隠し、内容をそのまま表示する。
       可能な限りレイアウトが崩れないようにするため & SSRでも内容が読めるように(SEO?)という意味もある
       */}
         <pre
           className={clsx(
-            "font-mono overflow-auto cursor-wait",
+            "font-mono whitespace-pre-line cursor-wait",
+            "pr-3",
             "min-h-26", // xterm.jsで5行分の高さ
             termReady && "hidden"
           )}
@@ -176,7 +222,8 @@ export function ExecFile(props: ExecProps) {
           className={clsx(
             !termReady &&
               /* "hidden" だとterminalがdivのサイズを取得しようとしたときにバグる*/
-              "absolute invisible"
+              "absolute invisible",
+            "w-full h-full"
           )}
           ref={terminalRef}
         />
@@ -184,6 +231,49 @@ export function ExecFile(props: ExecProps) {
           <div className="absolute z-10 inset-0 cursor-wait" />
         )}
       </div>
-    </div>
+    </Modal>
+  );
+}
+
+export function StartButtonContent() {
+  return (
+    <>
+      {/*<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->*/}
+      <svg
+        fill="currentColor"
+        className="w-4 h-4"
+        viewBox="0 0 32 32"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M5.92 24.096q0 1.088 0.928 1.728 0.512 0.288 1.088 0.288 0.448 0 0.896-0.224l16.16-8.064q0.48-0.256 0.8-0.736t0.288-1.088-0.288-1.056-0.8-0.736l-16.16-8.064q-0.448-0.224-0.896-0.224-0.544 0-1.088 0.288-0.928 0.608-0.928 1.728v16.16z"></path>
+      </svg>
+      <span className="inline-block w-7">実行</span>
+    </>
+  );
+}
+export function StopButtonContent() {
+  /*<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->*/
+  return (
+    <>
+      <svg
+        className="w-4 h-4"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6 12C6 12.5523 6.44772 13 7 13L17 13C17.5523 13 18 12.5523 18 12C18 11.4477 17.5523 11 17 11H7C6.44772 11 6 11.4477 6 12Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 20.9932C7.03321 20.9932 3.00683 16.9668 3.00683 12C3.00683 7.03321 7.03321 3.00683 12 3.00683C16.9668 3.00683 20.9932 7.03321 20.9932 12C20.9932 16.9668 16.9668 20.9932 12 20.9932Z"
+          fill="currentColor"
+        />
+      </svg>
+      <span className="inline-block w-7">停止</span>
+    </>
   );
 }
diff --git a/app/terminal/modal.tsx b/app/terminal/modal.tsx
new file mode 100644
index 00000000..34f65be7
--- /dev/null
+++ b/app/terminal/modal.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import clsx from "clsx";
+import { ReactNode, useEffect, useRef } from "react";
+
+/*
+https://daisyui.com/components/modal/ の3の方法を採用している。
+ただし、modalのコンテナ自体を条件付きでレンダリングするので、aタグでの開閉だけでなくstateが必要になる。
+urlハッシュとstateを両方同時にtrueにしてもモーダルを開くアニメーションはするっぽい
+*/
+
+interface Props {
+  id: string;
+  className?: string;
+  classNameModal?: string;
+  classNameNonModal?: string;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  children: ReactNode;
+}
+export function Modal(props: Props) {
+  const modalDivRef = useRef<HTMLDivElement>(null);
+  const { id, open, setOpen } = props;
+  useEffect(() => {
+    const onHashChange = () => {
+      if (location.hash === `#${id}`) {
+        setOpen(true);
+      } else {
+        // アニメーションが終わった後にmodalモードを解除する
+        setTimeout(() => setOpen(false), 300);
+      }
+    };
+    onHashChange();
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, [id, setOpen]);
+  useEffect(() => {
+    if (open) {
+      const updateHeight = () => {
+        if (modalDivRef.current && window.visualViewport) {
+          modalDivRef.current.style.height = `${window.visualViewport.height}px`;
+        }
+      };
+      updateHeight();
+      window.visualViewport?.addEventListener("resize", updateHeight);
+      return () =>
+        window.visualViewport?.removeEventListener("resize", updateHeight);
+    } else {
+      if (modalDivRef.current) {
+        modalDivRef.current.style.height = "";
+      }
+    }
+  }, [open]);
+
+  return (
+    <div
+      className={clsx(open && "modal h-dvh")}
+      role={open ? "dialog" : undefined}
+      ref={modalDivRef}
+      id={id}
+    >
+      <div
+        className={clsx(
+          open
+            ? clsx(
+                "modal-box",
+                "max-w-300 p-0",
+                "size-full",
+                "md:border-2 border-accent",
+                "rounded-box-modal", // globals.cssで定義。md未満の場合、--radius-boxを上書きしこれ以下の要素のrounded-boxを無効にする
+                "md:size-[calc(100%-2rem)]",
+                "lg:size-[calc(100%-4rem)]",
+                "xl:size-[calc(100%-6rem)]",
+                props.classNameModal
+              )
+            : clsx(
+                "border-2 border-accent rounded-box",
+                "shadow-md m-2 h-max",
+                props.classNameNonModal
+              ),
+          props.className
+        )}
+      >
+        {props.children}
+      </div>
+      <div className={open ? "modal-backdrop" : "hidden"}>
+        <button onClick={() => history.back()}>close</button>
+      </div>
+    </div>
+  );
+}
+
+export function MinMaxButton(props: { open: boolean; id: string }) {
+  return (
+    <button
+      className={clsx("btn btn-sm btn-soft btn-accent my-1 mr-1")}
+      onClick={() => {
+        if (props.open) {
+          history.back();
+        } else {
+          // props.setOpen(true);
+          location.href = `#${props.id}`;
+        }
+      }}
+    >
+      {props.open ? (
+        /*<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->*/
+        <svg
+          className="w-3 h-3"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M2 22L9 15M9 15H3.14286M9 15V20.8571"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M22 2L15 9M15 9H20.8571M15 9V3.14286"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ) : (
+        /*<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->*/
+        <svg
+          className="w-3 h-3"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9 15L2 22M2 22H7.85714M2 22V16.1429"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M15 9L22 2M22 2H16.1429M22 2V7.85714"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+      <span className="hidden md:inline">{props.open ? "戻る" : "最大化"}</span>
+    </button>
+  );
+}
diff --git a/app/terminal/repl.tsx b/app/terminal/repl.tsx
index af245043..3f419350 100644
--- a/app/terminal/repl.tsx
+++ b/app/terminal/repl.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { highlightCodeToAnsi, importPrism } from "./highlight";
 import chalk from "chalk";
 chalk.level = 3;
 import {
+  calculateRows,
   clearTerminal,
-  getRows,
   hideCursor,
   showCursor,
   systemMessageColor,
@@ -17,6 +17,8 @@ import { useEmbedContext } from "./embedContext";
 import { emptyMutex, langConstants, RuntimeLang, useRuntime } from "./runtime";
 import clsx from "clsx";
 import { InlineCode } from "@/[lang]/[pageId]/markdown";
+import { MinMaxButton, Modal } from "./modal";
+import { StopButtonContent } from "./exec";
 
 export type ReplOutputType =
   | "stdout"
@@ -109,28 +111,67 @@ export function ReplTerminal({
     throw new Error(`runCommand not available for language: ${language}`);
   }
 
-  const initCommand = splitReplExamples?.(initContent || "");
+  const initCommand = useMemo(
+    () => splitReplExamples?.(initContent || ""),
+    [splitReplExamples, initContent]
+  );
 
-  const { terminalRef, terminalInstanceRef, termReady } = useTerminal({
-    getRows: (cols: number) => {
+  // REPLのユーザー入力
+  const inputBuffer = useRef<string[]>([]);
+
+  // ターミナルの行数を計算するためのstate
+  const [newContents, setNewContents] = useState("\n");
+  const [isModal, setIsModal] = useState(false);
+  const [fontSize, setFontSize] = useState<number>();
+  const [windowHeight, setWindowHeight] = useState<number>(1000);
+  useEffect(() => {
+    const update = () => {
+      setFontSize(
+        parseFloat(getComputedStyle(document.documentElement).fontSize)
+      ); // 1rem
+      setWindowHeight(window.innerHeight);
+    };
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+  const getRows = useCallback(
+    (cols: number) => {
       let rows = 0;
       for (const cmd of initCommand || []) {
         // コマンドの行数をカウント
         for (const line of cmd.command.split("\n")) {
-          rows += getRows(prompt + line, cols);
+          rows += calculateRows(prompt + line, cols);
         }
         // 出力の行数をカウント
         for (const out of cmd.output) {
-          rows += getRows(out.message, cols);
+          rows += calculateRows(out.message, cols);
         }
       }
-      return rows + 2; // 最後のプロンプト行を含める
+      for (const line of newContents.trim().split("\n")) {
+        rows += calculateRows(line, cols);
+      }
+      // 最後のプロンプト行を含める
+      rows += Math.max(
+        2,
+        inputBuffer.current.reduce(
+          (sum, line) => sum + calculateRows(prompt + line, cols),
+          0
+        )
+      );
+      return isModal
+        ? "fit"
+        : Math.min(
+            rows,
+            Math.floor((windowHeight * 0.5) / ((fontSize || 16) * 1.2))
+          );
     },
+    [initCommand, prompt, newContents, fontSize, isModal, windowHeight]
+  );
+  const { terminalRef, terminalInstanceRef, termReady } = useTerminal({
+    getRows,
   });
 
-  // REPLのユーザー入力
-  const inputBuffer = useRef<string[]>([]);
-
   const [executionState, setExecutionState] = useState<"idle" | "executing">(
     "idle"
   );
@@ -224,6 +265,7 @@ export function ReplTerminal({
               terminalInstanceRef.current.writeln("");
               const command = inputBuffer.current.join("\n").trim();
               inputBuffer.current = [];
+              setNewContents((contents) => contents + prompt + command + "\n");
               const commandId = addReplCommand(terminalId, command);
               setExecutionState("executing");
               let executionDone = false;
@@ -241,6 +283,9 @@ export function ReplTerminal({
                   } else {
                     handleOutput(output);
                   }
+                  setNewContents(
+                    (contents) => contents + output.message + "\n"
+                  );
                   addReplOutput(terminalId, commandId, output);
                 });
               });
@@ -295,6 +340,7 @@ export function ReplTerminal({
       addReplOutput,
       terminalId,
       terminalInstanceRef,
+      prompt,
     ]
   );
   useEffect(() => {
@@ -379,6 +425,7 @@ export function ReplTerminal({
         // なぜかそのままscrollToTop()を呼ぶとスクロールせず、setTimeoutを入れるとscrollする(治安bad)
         setTimeout(() => terminalInstanceRef.current!.scrollToTop());
         setInitCommandState("done");
+        terminalInstanceRef.current?.focus();
       })();
     }
   }, [
@@ -395,16 +442,36 @@ export function ReplTerminal({
     Prism,
   ]);
 
+  const [showStopButton, setShowStopButton] = useState(false);
+  useEffect(() => {
+    if (
+      !termReady ||
+      initCommandState !== "done" ||
+      executionState !== "executing"
+    ) {
+      setShowStopButton(false);
+    } else {
+      // 一瞬で実行が完了するなら表示しない
+      const timeout = setTimeout(() => setShowStopButton(true), 300);
+      return () => clearTimeout(timeout);
+    }
+  }, [termReady, initCommandState, executionState]);
   return (
-    <div className="bg-base-300 border border-accent border-2 shadow-md m-2 rounded-box h-max">
-      <div className="bg-base-200 flex items-center rounded-t-box">
+    <Modal
+      id={"repl-" + terminalId}
+      className={clsx("bg-base-300", "flex flex-col", "isolate")}
+      open={isModal}
+      setOpen={setIsModal}
+    >
+      <div className="bg-base-200 w-full overflow-x-clip overflow-y-visible flex items-center rounded-t-box">
         <button
           /* daisyuiのbtnはheightがvar(--size)で固定。
           ここでは最小でそのサイズ、ただし親コンテナがそれより大きい場合に大きくしたい
           → heightを解除し、min-heightをデフォルトのサイズと同じにする */
           className={clsx(
-            "btn btn-soft btn-accent h-[unset]! min-h-(--size) self-stretch",
-            "rounded-none rounded-tl-[calc(var(--radius-box)-2px)]"
+            "btn btn-soft btn-error h-[unset]! min-h-(--size) self-stretch",
+            "rounded-none rounded-tl-[calc(var(--radius-box)-2px)]",
+            !showStopButton && "hidden"
           )}
           onClick={() => {
             // Ctrl+C
@@ -413,18 +480,18 @@ export function ReplTerminal({
               terminalInstanceRef.current.write("^C");
             }
           }}
-          disabled={
+          /*disabled={
             !termReady ||
             initCommandState !== "done" ||
             executionState !== "executing"
-          }
+          }*/
         >
-          ■ 停止
+          <StopButtonContent />
         </button>
         <span className="text-sm my-1 ml-3 text-left">
           {runtimeInfo?.prettyLangName || language} 実行環境
         </span>
-        <div className="ml-1 tooltip tooltip-secondary tooltip-bottom">
+        <div className="ml-1 tooltip tooltip-secondary tooltip-bottom z-1">
           <div className="tooltip-content bg-secondary/60 backdrop-blur-xs">
             ブラウザ上で動作する
             <span className="mx-0.5">
@@ -452,15 +519,18 @@ export function ReplTerminal({
             ？
           </button>
         </div>
+        <div className="flex-1" />
+        <MinMaxButton open={isModal} id={`repl-${terminalId}`} />
       </div>
       {/*
       ターミナル表示の初期化が完了するまでの間、ターミナルは隠し、内容をそのまま表示する。
       可能な限りレイアウトが崩れないようにするため & SSRでも内容が読めるように(SEO?)という意味もある
       */}
-      <div className="relative p-4 pr-1 pt-2">
+      <div className="flex-1 w-full overflow-hidden bg-base-300 relative p-4 pr-1 pt-2 rounded-b-box">
         <pre
           className={clsx(
-            "font-mono overflow-auto cursor-wait",
+            "font-mono whitespace-pre-line cursor-wait",
+            "pr-3",
             "min-h-26", // xterm.jsで5行分の高さ
             initCommandState !== "initializing" && "hidden"
           )}
@@ -494,11 +564,13 @@ export function ReplTerminal({
           className={clsx(
             initCommandState === "initializing" &&
               /* "hidden" だとterminalがdivのサイズを取得しようとしたときにバグる*/
-              "absolute invisible"
+              "absolute invisible",
+            "w-full h-full"
           )}
           ref={terminalRef}
+          onTouchEnd={() => terminalInstanceRef.current?.focus()}
         />
       </div>
-    </div>
+    </Modal>
   );
 }
diff --git a/app/terminal/terminal.tsx b/app/terminal/terminal.tsx
index 79d614d2..a7a790ba 100644
--- a/app/terminal/terminal.tsx
+++ b/app/terminal/terminal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { Terminal } from "@xterm/xterm";
 import type { FitAddon } from "@xterm/addon-fit";
 import "@xterm/xterm/css/xterm.css";
@@ -31,7 +31,7 @@ export function strWidth(str: string): number {
 /**
  * contentsがちょうど収まるターミナルの高さを計算する
  */
-export function getRows(contents: string, cols: number): number {
+export function calculateRows(contents: string, cols: number): number {
   return contents
     .split("\n")
     .reduce(
@@ -85,7 +85,7 @@ function computeTerminalTheme() {
 }
 
 interface TerminalProps {
-  getRows?: (cols: number) => number;
+  getRows?: (cols: number) => number | "fit";
   onReady?: () => void;
 }
 export function useTerminal(props: TerminalProps) {
@@ -94,23 +94,33 @@ export function useTerminal(props: TerminalProps) {
   const fitAddonRef = useRef<FitAddon | null>(null);
   const [termReady, setTermReady] = useState<boolean>(false);
   const theme = useChangeTheme();
-  const getRowsRef = useRef<(cols: number) => number>(undefined);
-  getRowsRef.current = props.getRows;
   const onReadyRef = useRef<() => void>(undefined);
   onReadyRef.current = props.onReady;
+  const { getRows } = props;
+  const resizeTerminal = useCallback(() => {
+    // fitAddon.fit();
+    const dims = fitAddonRef.current?.proposeDimensions();
+    if (dims && !isNaN(dims.cols)) {
+      let rows = getRows?.(dims.cols) ?? 0;
+      if (rows === "fit") {
+        rows = dims.rows;
+      }
+      terminalInstanceRef.current?.resize(dims.cols, Math.max(5, rows));
+    }
+  }, [getRows]);
+  useEffect(() => {
+    const observer = new ResizeObserver(resizeTerminal);
+    observer.observe(terminalRef.current);
+    return () => observer.disconnect();
+  }, [resizeTerminal]);
+  const resizeTerminalRef = useRef(resizeTerminal);
+  resizeTerminalRef.current = resizeTerminal;
 
   // ターミナルの初期化処理
+  // 初期化が完了した瞬間にその時点のresizeTerminalとonReadyを呼び出す必要があるので、refに入れている
   useEffect(() => {
     if (typeof window !== "undefined") {
       const abortController = new AbortController();
-      const resizeTerminal = () => {
-        // fitAddon.fit();
-        const dims = fitAddonRef.current?.proposeDimensions();
-        if (dims && !isNaN(dims.cols)) {
-          const rows = Math.max(5, getRowsRef.current?.(dims.cols) ?? 0);
-          terminalInstanceRef.current?.resize(dims.cols, rows);
-        }
-      }
       /*
       globals.cssでフォントを指定し読み込んでいるが、
       それが読み込まれる前にterminalを初期化してしまうとバグるので、
@@ -123,6 +133,7 @@ export function useTerminal(props: TerminalProps) {
       ]).then(([{ Terminal }, { FitAddon }]) => {
         if (!abortController.signal.aborted) {
           const term = new Terminal({
+            screenReaderMode: true,
             cursorBlink: true,
             convertEol: true,
             cursorStyle: "bar",
@@ -142,7 +153,7 @@ export function useTerminal(props: TerminalProps) {
           fitAddonRef.current = new FitAddon();
           term.loadAddon(fitAddonRef.current);
           // fitAddonRef.current.fit();
-          resizeTerminal();
+          resizeTerminalRef.current();
 
           term.open(terminalRef.current);
 
@@ -171,12 +182,8 @@ export function useTerminal(props: TerminalProps) {
         }
       });
 
-      const observer = new ResizeObserver(resizeTerminal);
-      observer.observe(terminalRef.current);
-
       return () => {
         abortController.abort("terminal component dismount");
-        observer.disconnect();
         if (fitAddonRef.current) {
           fitAddonRef.current.dispose();
           fitAddonRef.current = null;
diff --git a/package-lock.json b/package-lock.json
index 66c815ac..5201e4a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,8 +17,8 @@
         "@opennextjs/cloudflare": "^1.16.1",
         "@ruby/wasm-wasi": "^2.7.2",
         "@typescript/vfs": "^1.6.2",
-        "@xterm/addon-fit": "0.11.0-beta.115",
-        "@xterm/xterm": "5.6.0-beta.115",
+        "@xterm/addon-fit": "^0.11.0",
+        "@xterm/xterm": "^6.1.0-beta.168",
         "ace-builds": "^1.43.2",
         "async-mutex": "^0.5.0",
         "better-auth": "^1.4.5",
@@ -5841,19 +5841,19 @@
       }
     },
     "node_modules/@xterm/addon-fit": {
-      "version": "0.11.0-beta.115",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0-beta.115.tgz",
-      "integrity": "sha512-L9o6SHQdY6gOapiwFhg5HbeVQHskq3dgDX3OECX+SUKCHjKZDFgN/pgfngdMyK0LxKDzJu3vl5FnyrEtpyuyTg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@xterm/xterm": "^5.6.0-beta.115"
-      }
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz",
+      "integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==",
+      "license": "MIT"
     },
     "node_modules/@xterm/xterm": {
-      "version": "5.6.0-beta.115",
-      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.6.0-beta.115.tgz",
-      "integrity": "sha512-EJXAW6dbxPuwQnLfTmPB5R3M5uu8qp24ltHdjCcfwGpudKxQRoDEbq1IeGrVLIuRc/8TbnT1U07dXUX7kyGYEQ==",
-      "license": "MIT"
+      "version": "6.1.0-beta.168",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.1.0-beta.168.tgz",
+      "integrity": "sha512-emtXKWZmyOZhcEg6StZ3qFU6M++FM506+2V/E//iqMitCDFfJAGJNJYUS5o0/PRN0MaIKo1ladXhfnozAKaGTA==",
+      "license": "MIT",
+      "workspaces": [
+        "addons/*"
+      ]
     },
     "node_modules/abort-controller": {
       "version": "3.0.0",
diff --git a/package.json b/package.json
index 963fbb91..3da7831d 100644
--- a/package.json
+++ b/package.json
@@ -28,8 +28,8 @@
     "@opennextjs/cloudflare": "^1.16.1",
     "@ruby/wasm-wasi": "^2.7.2",
     "@typescript/vfs": "^1.6.2",
-    "@xterm/addon-fit": "0.11.0-beta.115",
-    "@xterm/xterm": "5.6.0-beta.115",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/xterm": "^6.1.0-beta.168",
     "ace-builds": "^1.43.2",
     "async-mutex": "^0.5.0",
     "better-auth": "^1.4.5",
@@ -61,8 +61,8 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
-    "@types/js-yaml": "^4.0.9",
     "@types/chai": "^5.2.3",
+    "@types/js-yaml": "^4.0.9",
     "@types/mocha": "^10.0.10",
     "@types/node": "^20",
     "@types/object-inspect": "^1.13.0",