fix(dashboard): correct rem-to-pixel conversion for drag overlay grid cells

- Convert rowHeight and gap from rem to pixels using gridEngine.remToPixels()
- Fix highlightGridCells() to use pixel values for positioning and sizing
- Fix showGridOverlay() to calculate container height in pixels
- Resolves issue where green highlight boxes rendered as tiny squished lines
- Follows same conversion pattern used in gridEngine.getPixelPosition()

src/systems/dashboard/dragDrop.js

@@ -374,13 +374,18 @@ export class DragDropHandler {
     showGridOverlay() {
         if (this.gridOverlay) return;
 
+        // Calculate actual grid height based on widget positions (returns rem)
+        const widgets = this.dragState?.widgets || [];
+        const gridHeightRem = this.gridEngine.calculateGridHeight(widgets);
+        const gridHeightPx = this.gridEngine.remToPixels(gridHeightRem);
+
         this.gridOverlay = document.createElement('div');
         this.gridOverlay.className = 'grid-overlay';
         this.gridOverlay.style.position = 'absolute';
         this.gridOverlay.style.top = '0';
         this.gridOverlay.style.left = '0';
         this.gridOverlay.style.width = '100%';
-        this.gridOverlay.style.height = '100%';
+        this.gridOverlay.style.height = gridHeightPx + 'px';
         this.gridOverlay.style.pointerEvents = 'none';
         this.gridOverlay.style.zIndex = '9999';
 
@@ -410,17 +415,22 @@ export class DragDropHandler {
         // Clear previous highlights
         this.gridOverlay.innerHTML = '';
 
-        // Get pixel positions for cells
+        // Convert rem to pixels for calculations
-        const colWidth = (this.gridEngine.containerWidth - (this.gridEngine.gap * (this.gridEngine.columns + 1))) / this.gridEngine.columns;
+        const gapPx = this.gridEngine.remToPixels(this.gridEngine.gap);
+        const rowHeightPx = this.gridEngine.remToPixels(this.gridEngine.rowHeight);
+
+        // Calculate column width in pixels
+        const totalGaps = gapPx * (this.gridEngine.columns + 1);
+        const colWidth = (this.gridEngine.containerWidth - totalGaps) / this.gridEngine.columns;
 
         for (let row = y; row < y + h; row++) {
             for (let col = x; col < x + w; col++) {
                 const cell = document.createElement('div');
                 cell.style.position = 'absolute';
-                cell.style.left = (col * (colWidth + this.gridEngine.gap) + this.gridEngine.gap) + 'px';
+                cell.style.left = (col * (colWidth + gapPx) + gapPx) + 'px';
-                cell.style.top = (row * (this.gridEngine.rowHeight + this.gridEngine.gap) + this.gridEngine.gap) + 'px';
+                cell.style.top = (row * (rowHeightPx + gapPx) + gapPx) + 'px';
                 cell.style.width = colWidth + 'px';
-                cell.style.height = this.gridEngine.rowHeight + 'px';
+                cell.style.height = rowHeightPx + 'px';
                 cell.style.backgroundColor = 'rgba(78, 204, 163, 0.3)';
                 cell.style.border = '2px solid rgba(78, 204, 163, 0.6)';
                 cell.style.borderRadius = '4px';

src/systems/dashboard/editModeManager.js

@@ -160,48 +160,19 @@ export class EditModeManager {
     }
 
     /**
-     * Show grid overlay
+     * Show grid overlay (now handled via CSS on container)
      */
     showGridOverlay() {
-        if (this.gridOverlay) return;
+        // Grid overlay is now pure CSS via .rpg-dashboard-grid[data-edit-mode="true"]
-
+        // No DOM manipulation needed
-        this.gridOverlay = document.createElement('div');
-        this.gridOverlay.className = 'grid-overlay-lines';
-        this.gridOverlay.style.position = 'absolute';
-        this.gridOverlay.style.top = '0';
-        this.gridOverlay.style.left = '0';
-        this.gridOverlay.style.width = '100%';
-        this.gridOverlay.style.height = '100%';
-        this.gridOverlay.style.pointerEvents = 'none';
-        this.gridOverlay.style.zIndex = '1';
-        this.gridOverlay.style.backgroundImage = `
-            repeating-linear-gradient(
-                0deg,
-                rgba(78, 204, 163, 0.1) 0px,
-                rgba(78, 204, 163, 0.1) 1px,
-                transparent 1px,
-                transparent 80px
-            ),
-            repeating-linear-gradient(
-                90deg,
-                rgba(78, 204, 163, 0.1) 0px,
-                rgba(78, 204, 163, 0.1) 1px,
-                transparent 1px,
-                transparent calc((100% - 13 * 12px) / 12)
-            )
-        `;
-
-        this.container.appendChild(this.gridOverlay);
     }
 
     /**
-     * Hide grid overlay
+     * Hide grid overlay (now handled via CSS on container)
      */
     hideGridOverlay() {
-        if (this.gridOverlay) {
+        // Grid overlay is now pure CSS via .rpg-dashboard-grid[data-edit-mode="true"]
-            this.gridOverlay.remove();
+        // No DOM manipulation needed
-            this.gridOverlay = null;
-        }
     }
 
     /**

style.css

@@ -1158,6 +1158,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     min-height: 0; /* Allow flex to shrink below natural size */
 }
 
+
 /* Hide resize handles by default */
 .resize-handles {
     opacity: 0;