From 8ce4de0c8d60a306dcd0a4e29090f6751663afa8 Mon Sep 17 00:00:00 2001
From: Felix Roos <roos@entrecode.de>
Date: Sun, 10 Jul 2022 20:52:46 +0200
Subject: [PATCH] style errors, fixed backdrop + hide console

---
 repl/src/App.css |  2 +-
 repl/src/App.jsx | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/repl/src/App.css b/repl/src/App.css
index 9c8edd839..c8b7b71f7 100644
--- a/repl/src/App.css
+++ b/repl/src/App.css
@@ -20,7 +20,7 @@ body {
 
 .darken::before {
   content: ' ';
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
diff --git a/repl/src/App.jsx b/repl/src/App.jsx
index f8d7374ce..ff47d21a2 100644
--- a/repl/src/App.jsx
+++ b/repl/src/App.jsx
@@ -109,6 +109,7 @@ function App() {
     pushLog,
     pending,
     hideHeader,
+    hideConsole,
   } = useRepl({
     tune: '// LOADING...',
     defaultSynth,
@@ -293,19 +294,24 @@ function App() {
         </header>
       )}
       <section className="grow flex flex-col text-gray-100">
-        <div className="grow relative flex overflow-auto" id="code">
+        <div className="grow relative flex overflow-auto pb-8 cursor-text" id="code">
           {/* onCursor={markParens} */}
           <CodeMirror value={code} onChange={setCode} onViewChanged={setView} />
-          <span className="z-[20] py-1 px-2 absolute top-0 right-0 text-xs whitespace-pre text-right pointer-events-none">
+          <span className="z-[20] bg-black rounded-t-md py-1 px-2 fixed bottom-0 right-1 text-xs whitespace-pre text-right pointer-events-none">
             {!cycle.started ? `press ctrl+enter to play\n` : dirty ? `ctrl+enter to update\n` : 'no changes\n'}
           </span>
           {error && (
-            <div className={cx('absolute right-2 bottom-2 px-2', 'text-red-500')}>
+            <div
+              className={cx(
+                'rounded-md fixed pointer-events-none left-2 bottom-1 text-xs bg-black px-2 z-[20]',
+                'text-red-500',
+              )}
+            >
               {error?.message || 'unknown error'}
             </div>
           )}
         </div>
-        {!isEmbedded && (
+        {!isEmbedded && !hideConsole && (
           <textarea
             className="z-[10] h-16 border-0 text-xs bg-[transparent] border-t border-slate-600 resize-none"
             value={log}