fix: adjust editor layout (#28)

Fix the editor layout and move the console from the right of the screen to the bottom of the screen
abolkog · Oct 17, 2024 · 8ce1da4 · 8ce1da4
1 parent 7df79fb
commit 8ce1da4
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 19 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,8 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <link rel="shortcut icon" href="favicon.ico" /> 
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <link rel="shortcut icon" href="favicon.ico" />
     <link
       href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.3/slate/bootstrap.min.css"
       rel="stylesheet"
@@ -22,6 +25,11 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"
     />
 
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/codicon.min.css"
+      rel="stylesheet"
+    />
+
     <title>JS Playground | A.B.O.L.K.O.G</title>
   </head>
   <body>

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -8,8 +8,6 @@ import JsonView from 'components/JsonView';
 import CodeEditor from 'components/CodeEditor';
 import Console from 'components/Console';
 
-const width = 1400;
-
 const App: React.FC = () => {
   const { dispatch } = useContext(AppContext);
   const [position, setPosition] = useState<MenuPosition | null>(null);
@@ -29,18 +27,16 @@ const App: React.FC = () => {
   };
 
   return (
-    <div className="mainContainer">
+    <div className="flex flexColumn">
       <Header />
 
-      <div className="appConainer">
-        <div style={{ width }}>
+      <div className="flex flexColumn">
+        <div className="editorContainer">
           <CodeEditor />
         </div>
 
-        <div style={{ width: window.innerWidth - width - 20 }}>
-          <div style={{ height: '100%' }} onContextMenu={handleContextMenu}>
-            <Console />
-          </div>
+        <div className=" consoleContainer" onContextMenu={handleContextMenu}>
+          <Console />
         </div>
       </div>
 

diff --git a/src/styles/App.css b/src/styles/App.css
@@ -9,20 +9,31 @@ body {
   display: flex;
   flex: 1;
   height: 100%;
+
+
 }
 
-.mainContainer {
+.flex {
   display: flex;
   flex: 1;
+}
+
+.flexColumn {
   flex-direction: column;
   overflow: hidden;
 }
 
-.appConainer {
+.editorContainer {
+  height: 70vh;
+}
+
+.consoleContainer {
+  height: 20vh;
   display: flex;
-  flex: 1;
+  flex: 1
 }
 
+
 .monaco-editor,
 .overflow-guard {
   width: 100% !important;
@@ -33,16 +44,15 @@ body {
   word-break: break-all;
   font-size: large;
   font-family: sans-serif;
+  padding: 20px;
+  overflow-y: auto;
   width: 100%;
-  height: 100vh;
-  padding: 20px 20px 120px 20px;
-  overflow-y: scroll;
-
 }
 
 .console-light {
   background-color: #fff;
-    color: #3a3f44;
+  color: #3a3f44;
+  border-top: 1px solid #3a3f44;
 }
 
 .error {