From d3b0eccfe836b45db6c3b438b9ab6ab809330e03 Mon Sep 17 00:00:00 2001 From: Lucas 'Paperboy' Rose-Winters Date: Wed, 29 Oct 2025 22:15:34 +1100 Subject: [PATCH] fix(resize): fix excessive sensitivity by converting rem to pixels The resize handler was mixing rem and pixel units without proper conversion, causing widgets to fly wildly off screen with small mouse movements. Root cause: - rowHeight and gap were stored as rem values (e.g., 5 rem, 0.75 rem) - Delta calculations divided pixel movements by rem values directly - This caused ~14x excessive sensitivity Fix: - Add remToPixels() conversions for gap and rowHeight before calculations - Use pixel values (gapPx, rowHeightPx) in all delta-to-grid-unit conversions - Matches the correct pattern used in drag handler and gridEngine.snapToCell() Example: - Before: 20px movement / 5 rem = 3.48 grid units (way too much!) - After: 20px movement / 80px = 0.22 grid units (smooth and predictable) Fixes both desktop and mobile resize sensitivity issues. File: src/systems/dashboard/resizeHandler.js Lines: 333-343 (updateResizeSize method) --- src/systems/dashboard/resizeHandler.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/systems/dashboard/resizeHandler.js b/src/systems/dashboard/resizeHandler.js index 715559c..5c4b5ae 100644 --- a/src/systems/dashboard/resizeHandler.js +++ b/src/systems/dashboard/resizeHandler.js @@ -330,14 +330,17 @@ export class ResizeHandler { const deltaX = clientX - startX; const deltaY = clientY - startY; + // Convert rem to pixels for calculations + const gapPx = this.gridEngine.remToPixels(this.gridEngine.gap); + const rowHeightPx = this.gridEngine.remToPixels(this.gridEngine.rowHeight); + // Get column/row size in pixels (containerWidth already set by ResizeObserver in DashboardManager) - const totalGaps = this.gridEngine.gap * (this.gridEngine.columns + 1); + const totalGaps = gapPx * (this.gridEngine.columns + 1); const colWidth = (this.gridEngine.containerWidth - totalGaps) / this.gridEngine.columns; - const rowHeight = this.gridEngine.rowHeight; // Convert pixel delta to grid units - const deltaGridX = Math.round(deltaX / (colWidth + this.gridEngine.gap)); - const deltaGridY = Math.round(deltaY / (rowHeight + this.gridEngine.gap)); + const deltaGridX = Math.round(deltaX / (colWidth + gapPx)); + const deltaGridY = Math.round(deltaY / (rowHeightPx + gapPx)); // Calculate new dimensions based on handle type let newW = startWidth;