Modified render styles to improve printability

client/src/components/shop-template-editor/shop-template-editor.component.jsx

@@ -1,28 +1,16 @@
-import "codemirror/addon/hint/show-hint";
-import "codemirror/addon/lint/lint";
 import "codemirror-graphql/hint";
 import "codemirror-graphql/lint";
 import "codemirror-graphql/mode";
-
+import "codemirror/addon/hint/show-hint";
+import "codemirror/addon/lint/lint";
 import "codemirror/lib/codemirror.css";
 import "codemirror/theme/material.css";
-import "codemirror/addon/hint/show-hint";
-
 import React, { useEffect, useRef, useState } from "react";
 import { Controlled as CmEditor } from "react-codemirror2";
 import EmailEditor from "react-email-editor";
 import GqlSchema from "../../graphql/schema";
 import ShopTemplateEditorSaveButton from "../shop-template-editor-save-button/shop-template-editor-save-button.component";
 import ShopTemplateTestRender from "../shop-template-test-render/shop-template-test-render.component";
-// CodeMirror.fromTextArea(document.getElementById("gqlcm"), {
-//   mode: "graphql",
-//   lint: {
-//     // schema: myGraphQLSchema,
-//   },
-//   hintOptions: {
-//     //  schema: myGraphQLSchema,
-//   },
-// });
 
 export default function ShopTemplateEditorComponent({
   templateId,
@@ -58,7 +46,7 @@ export default function ShopTemplateEditorComponent({
       <EmailEditor
         style={{ width: "100%" }}
         ref={emailEditorRef}
-        minHeight="800px"
+        minHeight="700px"
         onLoad={() => setEditorLoaded(true)}
         options={{
           // customCSS: [
@@ -75,9 +63,9 @@ export default function ShopTemplateEditorComponent({
           ],
         }}
       />
-      <div style={{ display: "flex" }}>
+      <div style={{ display: "flex", width: "90vw" }}>
         <CmEditor
-          style={{ width: "30rem" }}
+          style={{ flex: 1 }}
           value={editorContent.gql}
           options={{
             mode: "graphql",
@@ -94,6 +82,7 @@ export default function ShopTemplateEditorComponent({
           }}
         />
         <ShopTemplateTestRender
+          style={{ flex: 1 }}
           query={editorContent.gql}
           emailEditorRef={emailEditorRef}
         />