From b3ac180ace8907543408b9fed5f23251d73a5a09 Mon Sep 17 00:00:00 2001 From: David Montero Crespo Date: Fri, 14 Aug 2026 16:34:22 +0200 Subject: [PATCH] fix(editor): editor/canvas split drag desyncs when the container is padded The drag handler computed the split percentage against getBoundingClientRect().width (border box), but the panels' percentage widths resolve against the content box. Overlays that reserve space by padding .app-container (docked side panels) made the handle jump left on click and track offset from the cursor. Measure against clientWidth minus padding, with the origin shifted by border + left padding. --- frontend/src/pages/EditorPage.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/EditorPage.tsx b/frontend/src/pages/EditorPage.tsx index e35e879f..26b1480f 100644 --- a/frontend/src/pages/EditorPage.tsx +++ b/frontend/src/pages/EditorPage.tsx @@ -334,8 +334,20 @@ export const EditorPage: React.FC = () => { const handleMouseMove = (ev: MouseEvent) => { if (!resizingRef.current || !containerRef.current) return; - const rect = containerRef.current.getBoundingClientRect(); - const pct = ((ev.clientX - rect.left) / rect.width) * 100; + const el = containerRef.current; + const rect = el.getBoundingClientRect(); + // The panels' percentage widths resolve against the container's CONTENT + // box, but getBoundingClientRect() returns the border box — and overlays + // may reserve space by padding .app-container (e.g. a docked side panel). + // Measuring against the padded box makes the handle jump away from the + // cursor, so strip borders and padding first. + const cs = getComputedStyle(el); + const padLeft = parseFloat(cs.paddingLeft) || 0; + const padRight = parseFloat(cs.paddingRight) || 0; + const contentLeft = rect.left + el.clientLeft + padLeft; + const contentWidth = el.clientWidth - padLeft - padRight; + if (contentWidth <= 0) return; + const pct = ((ev.clientX - contentLeft) / contentWidth) * 100; setEditorWidthPct(Math.max(20, Math.min(80, pct))); };