more help layout

nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx

@@ -102,10 +102,10 @@ export default function EditQuiz({
   }, [moduleName, quiz, quizName, quizText, updateQuizMutation]);
 
   return (
-    <div className="h-full flex flex-col w-full">
-      <div className={"min-h-0 flex flex-row "}>
+    <div className="h-full flex flex-col align-middle px-1">
+      <div className={"min-h-0 flex flex-row w-full"}>
         {showHelp && (
-          <pre className="flex-shrink max-w-96">
+          <pre className=" max-w-96">
             <code>{helpString}</code>
           </pre>
         )}

nextjs/src/app/globals.css

@@ -20,6 +20,7 @@
 .monaco-editor .margin {
   background-color: #18181b !important;
 }
+.monaco-editor { position: absolute !important; }
 
 h1 {
   @apply text-4xl font-bold my-1;

nextjs/src/components/editor/InnerMonacoEditor.tsx

@@ -2,10 +2,9 @@
 import React, { useRef, useEffect } from "react";
 import loader from "@monaco-editor/loader";
 import { editor } from "monaco-editor/esm/vs/editor/editor.api";
-import * as monaco from 'monaco-editor';
+import * as monaco from "monaco-editor";
 loader.config({ monaco });
 
-
 export default function InnerMonacoEditor({
   value,
   onChange,
@@ -47,11 +46,19 @@ export default function InnerMonacoEditor({
     }
   }, [onChange, value]);
 
+  useEffect(() => {
+    window.addEventListener("resize", () => {
+      if (editorRef.current) {
+        editorRef.current.layout();
+      }
+    });
+  }, []);
+
   return (
     <div
       className="Editor"
       ref={divRef}
-      style={{ height: "100%", overflow: "hidden" }}
+      style={{ height: "100%", overflow: "hidden"}}
     ></div>
   );
 }