dynamic engine section height according to timeline height/resize

app/modules/LowerPanel/LowerPanel.tsx

@@ -12,7 +12,7 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => {
 
   return (
     <>
-      <div className="absolute top-3/4 h-1/4 w-screen border-t border-ui-panel-border bg-ui-panel">
+      <div className="absolute bottom-0 min-h-[220px] w-screen border-t border-ui-panel-border bg-ui-panel">
         {children}
       </div>
     </>

app/pages/PageEnigma/PageEnigma.tsx

@@ -22,7 +22,6 @@ export const PageEnigma = () => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const editorRef = useRef<Editor | null>(null);
   const [timelineHeight, setTimelineHeight] = useState(0);
-  const containerRef = useRef<HTMLDivElement | null>(null);
   const timelineRef = useRef<HTMLDivElement | null>(null);
 
   const editorCallback = useCallback(() => {
@@ -94,7 +93,6 @@ export const PageEnigma = () => {
               id="video-scene"
               width="1280px"
               height="720px"
-              className="hidden"
             />
 
             {/* Top controls */}
@@ -157,7 +155,7 @@ export const PageEnigma = () => {
         </div>
 
         {/* Timeline */}
-        <div ref={timelineRef}>
+        <div className="min-h-[220px]" ref={timelineRef}>
           <Timeline editorCurrent={editorRef.current} />
         </div>
       </div>

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

@@ -1,31 +1,32 @@
 import { LowerPanel } from "~/modules/LowerPanel";
-import {
-  Button,
-} from '~/components';
-import Editor from '../../js/editor';
+import { Button } from "~/components";
+import Editor from "../../js/editor";
 
 export const Timeline = ({
-  editorCurrent
-}:{
-  editorCurrent: Editor|null;
-})=>{
-  const handleButtonLoad = ()=>{
+  editorCurrent,
+}: {
+  editorCurrent: Editor | null;
+}) => {
+  const handleButtonLoad = () => {
     document.getElementById("load-upload")?.click();
-  }
-  const handleButtonRender = ()=>{
+  };
+  const handleButtonRender = () => {
     editorCurrent?.togglePlayback();
-  }
-  const handleButtonPlay = ()=>{
+  };
+  const handleButtonPlay = () => {};
 
-  }
-
-  return(
+  return (
     <LowerPanel>
-      <div className='h-10 w-full border-b border-ui-panel-border'></div>
-      <input style={{ display: 'none' }} type="file" id="load-upload" name="load-upload"></input>
+      <div className="h-10 w-full border-b border-ui-panel-border"></div>
+      <input
+        style={{ display: "none" }}
+        type="file"
+        id="load-upload"
+        name="load-upload"
+      ></input>
       <Button onClick={handleButtonLoad}>Load</Button>
-        <Button onClick={handleButtonRender}>Render</Button>
-        <Button onClick={handleButtonPlay}>Play</Button>
+      <Button onClick={handleButtonRender}>Render</Button>
+      <Button onClick={handleButtonPlay}>Play</Button>
     </LowerPanel>
-  )
-}
+  );
+};

app/root.tsx

@@ -55,7 +55,7 @@ export default function App() {
         <Meta />
         <Links />
       </head>
-      <body className="bg-ui-background">
+      <body className="overflow-hidden bg-ui-background">
         <TopBarInnerContext.Provider
           value={{
             TopBarInner: topBarInnerComponent,