moving some old buttons

app/pages/PageEnigma/PageEnigma.tsx

@@ -55,7 +55,8 @@ export const PageEnigma = () => {
           <div
             id="CanvasUiWrapper"
             className="flex"
-            style={{ height: `calc(100% - ${timelineHeight}px)` }}
+            // style={{ height: `calc(100% - ${timelineHeight}px)` }}
+            style={{ height: `calc(100% - 260px` }}
           >
             <div className="relative w-full overflow-hidden bg-gray-400">
               <canvas

app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx

@@ -23,6 +23,14 @@ export const ControlsTopButtons = () => {
   const handleButtonPlayBack = () => {
     editorEngine?.start_playback();
   };
+  const handleButtonLoad = () => {
+    document.getElementById("load-upload")?.click();
+  };
+  const handleButtonRender = () => {
+    editorEngine?.togglePlayback();
+  };
+  const handleButtonPlay = () => {};
+
   return(
     <div className="flex gap-2 pl-3 pt-3">
       <Button variant="secondary" onClick={handleButtonPlayBack}>
@@ -59,6 +67,12 @@ export const ControlsTopButtons = () => {
         <p>Ask Miles about ThreeJS</p>
         <p>Ask Wil about React</p>
       </ButtonDialogue>
+
+      <div className="fixed flex gap-2" style={{ top: 124, left: 12}}>
+        <Button onClick={handleButtonLoad}>Load</Button>
+        <Button onClick={handleButtonRender}>Render</Button>
+        <Button onClick={handleButtonPlay}>Play</Button>
+      </div>
     </div>
   );
 };

app/pages/PageEnigma/comps/Timeline/Timeline.tsx

@@ -33,25 +33,12 @@ export const Timeline = ({
   const { characters, objects, scale, length } = useContext(TrackContext);
   const { onPointerDown, time } = useMouseEventsAnimation();
 
-  const handleButtonLoad = () => {
-    document.getElementById("load-upload")?.click();
-  };
-  const handleButtonRender = () => {
-    editorEngine?.togglePlayback();
-  };
-  const handleButtonPlay = () => {};
-
   const sectionWidth = 60 * 4 * scale;
   const fullHeight =
     characters.length * 200 + objects.objects.length * 80 + 248 + 96;
 
   return (
     <>
-      <div className="fixed" style={{ top: 72, left: "calc(100% - 600px)" }}>
-        <Button onClick={handleButtonLoad}>Load</Button>
-        <Button onClick={handleButtonRender}>Render</Button>
-        <Button onClick={handleButtonPlay}>Play</Button>
-      </div>
       <LowerPanel>
         <div className="mt-4 flex h-3 text-sm text-white">
           {Array(length)