refactor(studio): simplify preview workspace layout

packages/studio/src/components/StudioLeftSidebar.tsx

@@ -38,7 +38,7 @@ export function StudioLeftSidebar({
   const {
     leftCollapsed,
     leftWidth,
-    setLeftWidth,
+    adjustPanelWidth,
     toggleLeftSidebar,
     handlePanelResizeStart,
     handlePanelResizeMove,
@@ -173,8 +173,7 @@ export function StudioLeftSidebar({
           if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
           e.preventDefault();
           const delta = e.key === "ArrowLeft" ? -16 : 16;
-          const maxLeft = Math.floor(window.innerWidth * 0.5);
-          setLeftWidth(Math.max(160, Math.min(maxLeft, leftWidth + delta)));
+          adjustPanelWidth("left", delta);
         }}
       >
         {/* Expanded hit zone: 8px wide, centered on the 3px seam */}

packages/studio/src/components/StudioRightPanel.tsx

@@ -96,7 +96,7 @@ export function StudioRightPanel({
 }: StudioRightPanelProps) {
   const {
     rightWidth,
-    setRightWidth,
+    adjustPanelWidth,
     rightPanelTab,
     setRightPanelTab,
     rightInspectorPanes,
@@ -464,7 +464,7 @@ export function StudioRightPanel({
           e.preventDefault();
           // Panel is right-anchored: ArrowLeft grows it, ArrowRight shrinks it.
           const delta = e.key === "ArrowLeft" ? 16 : -16;
-          setRightWidth(Math.max(160, Math.min(600, rightWidth + delta)));
+          adjustPanelWidth("right", delta);
         }}
       >
         {/* Expanded hit zone: 8px wide, centered on the 3px seam */}
@@ -473,7 +473,7 @@ export function StudioRightPanel({
         <div className="absolute top-1/2 left-0 h-[52px] w-[3px] -translate-y-1/2 bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
       </div>
       <div
-        className="flex min-w-0 flex-shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-800 bg-neutral-900"
+        className="flex min-w-0 flex-shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-800 bg-neutral-950"
         style={{ width: rightWidth }}
       >
         {captionEditMode ? (

packages/studio/src/components/nle/NLEContext.tsx

@@ -19,7 +19,7 @@ import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
 
 // Timeline gets a generous default height so the preview isn't oversized and the
 // tracks have room to breathe (CapCut-style). Users can still drag the divider.
-const DEFAULT_TIMELINE_H = 340;
+const DEFAULT_TIMELINE_H = 360;
 
 export function shouldDisableTimelineWhileCompositionLoading(compositionLoading: boolean): boolean {
   return compositionLoading;