consoladating layouts

src/components/EditLayout.tsx

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+
+export const EditLayout: FC<{
+  Header: ReactNode;
+  Body: ReactNode;
+  Footer: ReactNode;
+}> = ({ Header, Body, Footer }) => {
+  return (
+    <div className="h-full flex flex-col align-middle px-1 max-w-[2400px] mx-auto bg-gray-900 rounded">
+      {Header}
+      <div className="min-h-0 flex flex-row w-full flex-grow">
+        {Body}
+      </div>
+      {Footer}
+    </div>
+  );
+};

src/components/editor/MonacoEditor.css

@@ -5,8 +5,9 @@
 /* monaco editor */
 .monaco-editor-background,
 .monaco-editor .margin {
-  background-color: #020617 !important;
-  /* background-color: #18181b !important; */
+  /* background-color: #020617 !important; */
+  background-color: #030712 !important;
+  /* background-color: #101828 !important; */
 }
 .monaco-editor {
   position: absolute !important;