From 8ce1da429c055186d4de9a309f7f5253ec5f1b75 Mon Sep 17 00:00:00 2001 From: Khalid Elshafie Date: Thu, 17 Oct 2024 11:42:29 +1100 Subject: [PATCH] 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 --- public/index.html | 12 ++++++++++-- src/components/App/App.tsx | 14 +++++--------- src/styles/App.css | 26 ++++++++++++++++++-------- 3 files changed, 33 insertions(+), 19 deletions(-) diff --git a/public/index.html b/public/index.html index c82ff2b..2fc967e 100644 --- a/public/index.html +++ b/public/index.html @@ -2,8 +2,11 @@ - - + + + + JS Playground | A.B.O.L.K.O.G diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 0dd5d70..5e0bbf5 100644 --- 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(null); @@ -29,18 +27,16 @@ const App: React.FC = () => { }; return ( -
+
-
-
+
+
-
-
- -
+
+
diff --git a/src/styles/App.css b/src/styles/App.css index 70f9c49..692d8bb 100644 --- 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 {