diff --git a/pyscriptjs/src/components/pyrepl.ts b/pyscriptjs/src/components/pyrepl.ts
index 288aa2c..1b238bd 100644
--- a/pyscriptjs/src/components/pyrepl.ts
+++ b/pyscriptjs/src/components/pyrepl.ts
@@ -50,7 +50,7 @@ export class PyRepl extends BaseEvalElement {
// add an extra div where we can attach the codemirror editor
this.editorNode = document.createElement('div');
- addClasses(this.editorNode, ["editor-box", "border", "border-gray-300"]);
+ addClasses(this.editorNode, ["editor-box", "border", "border-gray-300", "group", "relative"]);
this.shadow.appendChild(this.wrapper);
}
@@ -95,22 +95,16 @@ export class PyRepl extends BaseEvalElement {
});
const mainDiv = document.createElement('div');
- addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-2", "mx-8", "relative"])
+ addClasses(mainDiv, ["parentBox", "flex", "flex-col", "mt-2", "mx-8", "relative"])
// add Editor to main PyScript div
mainDiv.appendChild(this.editorNode);
- // Butons DIV
- const eDiv = document.createElement('div');
- addClasses(eDiv, "buttons-box opacity-0 group-hover:opacity-100 relative right-0 -top-4 z-10 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group".split(" "))
- eDiv.setAttribute("role", "group");
-
// Play Button
this.btnRun = document.createElement('button');
this.btnRun.innerHTML = '';
- const buttonClasses = ["mr-2", "block"];
- addClasses(this.btnRun, buttonClasses);
- eDiv.appendChild(this.btnRun);
+ addClasses(this.btnRun, ["absolute", "right-0", "bottom-2", "opacity-0", "group-hover:opacity-100"]);
+ this.editorNode.appendChild(this.btnRun);
this.btnRun.onclick = wrap(this);
@@ -121,8 +115,6 @@ export class PyRepl extends BaseEvalElement {
return evaluatePython;
}
- mainDiv.appendChild(eDiv);
-
if (!this.id) {
console.log(
'WARNING: define with an id. should always have an id. More than one on a page won\'t work otherwise!',