Fix ruler layout calculation

remotion-dev · Sep 3, 2024 · cb973af · cb973af
1 parent bb80534
commit cb973af
Showing 1 changed file with 19 additions and 1 deletion.
diff --git a/packages/studio/src/components/TopPanel.tsx b/packages/studio/src/components/TopPanel.tsx
@@ -95,6 +95,22 @@ export const TopPanel: React.FC<{
 		[rulersAreVisible],
 	);
 
+	const sizeWithRulersApplied = useMemo(() => {
+		if (!rulersAreVisible) {
+			return size;
+		}
+
+		if (!size) {
+			return null;
+		}
+
+		return {
+			...size,
+			width: size.width - RULER_WIDTH,
+			height: size.height - RULER_WIDTH,
+		};
+	}, [rulersAreVisible, size]);
+
 	const onCollapseLeft = useCallback(() => {
 		setSidebarCollapsedState({left: 'collapsed', right: null});
 	}, [setSidebarCollapsedState]);
@@ -142,7 +158,9 @@ export const TopPanel: React.FC<{
 						>
 							<SplitterElement sticky={null} type="flexer">
 								<div ref={drawRef} style={canvasContainerStyle}>
-									{size ? <CanvasOrLoading size={size} /> : null}
+									{sizeWithRulersApplied ? (
+										<CanvasOrLoading size={sizeWithRulersApplied} />
+									) : null}
 								</div>
 							</SplitterElement>
 							{actualStateRight === 'expanded' ? (