2 files changed, 64 insertions, 47 deletions

diff --git a/apps/web/src/app/editor/editor.css b/apps/web/src/app/editor/editor.css
new file mode 100644
index 00000000..f482c6de
--- /dev/null
+++ b/apps/web/src/app/editor/editor.css
@@ -0,0 +1,4 @@
+/* Prevent scroll jumping on Mac devices when using the editor */
+body {
+  overflow: hidden;
+} 
\ No newline at end of file
diff --git a/apps/web/src/app/editor/page.tsx b/apps/web/src/app/editor/page.tsx
index 2f825a22..e0013937 100644
--- a/apps/web/src/app/editor/page.tsx
+++ b/apps/web/src/app/editor/page.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import { useEffect } from "react";
+import "./editor.css";
 import {
   ResizablePanelGroup,
   ResizablePanel,
   ResizableHandle,
 } from "../../components/ui/resizable";
 import { MediaPanel } from "../../components/editor/media-panel";
-import { PropertiesPanel } from "../../components/editor/properties-panel";
+// import { PropertiesPanel } from "../../components/editor/properties-panel";
 import { Timeline } from "../../components/editor/timeline";
 import { PreviewPanel } from "../../components/editor/preview-panel";
 import { EditorHeader } from "@/components/editor-header";
@@ -42,59 +43,71 @@ export default function Editor() {
 
   return (
     <EditorProvider>
-      <div className="h-screen w-screen flex flex-col bg-background">
+      <div className="h-screen w-screen flex flex-col bg-background overflow-hidden">
         <EditorHeader />
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel
-            defaultSize={mainContent}
-            minSize={30}
-            onResize={setMainContent}
-          >
-            {/* Main content area */}
-            <ResizablePanelGroup direction="horizontal">
-              {/* Tools Panel */}
-              <ResizablePanel
-                defaultSize={toolsPanel}
-                minSize={15}
-                onResize={setToolsPanel}
-              >
-                <MediaPanel />
-              </ResizablePanel>
+        <div className="flex-1 min-h-0 min-w-0">
+          <ResizablePanelGroup direction="vertical" className="h-full w-full">
+            <ResizablePanel
+              defaultSize={mainContent}
+              minSize={30}
+              maxSize={85}
+              onResize={setMainContent}
+              className="min-h-0"
+            >
+              {/* Main content area */}
+              <ResizablePanelGroup direction="horizontal" className="h-full w-full">
+                {/* Tools Panel */}
+                <ResizablePanel
+                  defaultSize={toolsPanel}
+                  minSize={15}
+                  maxSize={40}
+                  onResize={setToolsPanel}
+                  className="min-w-0"
+                >
+                  <MediaPanel />
+                </ResizablePanel>
 
-              <ResizableHandle withHandle />
+                <ResizableHandle withHandle />
 
-              {/* Preview Area */}
-              <ResizablePanel
-                defaultSize={previewPanel}
-                onResize={setPreviewPanel}
-              >
-                <PreviewPanel />
-              </ResizablePanel>
+                {/* Preview Area */}
+                <ResizablePanel
+                  defaultSize={previewPanel}
+                  minSize={30}
+                  onResize={setPreviewPanel}
+                  className="min-w-0 min-h-0 flex-1"
+                >
+                  <PreviewPanel />
+                </ResizablePanel>
 
-              <ResizableHandle withHandle />
+                <ResizableHandle withHandle />
 
-              {/* Properties Panel */}
-              <ResizablePanel
-                defaultSize={propertiesPanel}
-                minSize={15}
-                onResize={setPropertiesPanel}
-              >
-                <PropertiesPanel />
-              </ResizablePanel>
-            </ResizablePanelGroup>
-          </ResizablePanel>
+                {/* Properties Panel - Hidden for now but ready */}
+                {/* <ResizablePanel
+                  defaultSize={propertiesPanel}
+                  minSize={15}
+                  maxSize={40}
+                  onResize={setPropertiesPanel}
+                  className="min-w-0"
+                >
+                  <PropertiesPanel />
+                </ResizablePanel> */}
+              </ResizablePanelGroup>
+            </ResizablePanel>
 
-          <ResizableHandle withHandle />
+            <ResizableHandle withHandle />
 
-          {/* Timeline */}
-          <ResizablePanel
-            defaultSize={timeline}
-            minSize={15}
-            onResize={setTimeline}
-          >
-            <Timeline />
-          </ResizablePanel>
-        </ResizablePanelGroup>
+            {/* Timeline */}
+            <ResizablePanel
+              defaultSize={timeline}
+              minSize={15}
+              maxSize={70}
+              onResize={setTimeline}
+              className="min-h-0"
+            >
+              <Timeline />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
       </div>
     </EditorProvider>
   );