From 3862743e4cb393f66287ec997d3f387c335fba43 Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Wed, 18 Sep 2024 13:48:29 -0600
Subject: [PATCH] more help layout

---
 .../[moduleName]/quiz/[quizName]/EditQuiz.tsx       |  6 +++---
 nextjs/src/app/globals.css                          |  1 +
 nextjs/src/components/editor/InnerMonacoEditor.tsx  | 13 ++++++++++---
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
index 2aa2254..99db4fc 100644
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
+++ b/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>
         )}
diff --git a/nextjs/src/app/globals.css b/nextjs/src/app/globals.css
index fb9996b..237ec1d 100644
--- a/nextjs/src/app/globals.css
+++ b/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;
diff --git a/nextjs/src/components/editor/InnerMonacoEditor.tsx b/nextjs/src/components/editor/InnerMonacoEditor.tsx
index 70b4ff8..f273a16 100644
--- a/nextjs/src/components/editor/InnerMonacoEditor.tsx
+++ b/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>
   );
 }