Fix for overlapping hover outline of widgets

Author: Navaneeth-pk

frontend/src/Editor/DraggableBox.jsx

@@ -134,7 +134,7 @@ export const DraggableBox = function DraggableBox({
   }, [layoutData.height, layoutData.width, layoutData.left, layoutData.top, currentLayout]);
 
   function scaleWidth(width, scaleValue) { 
-    let newWidth = width * scaleValue + 6;
+    let newWidth = width * scaleValue;
 
     if(currentLayout === 'desktop') return newWidth;
 
@@ -145,7 +145,7 @@ export const DraggableBox = function DraggableBox({
         ...currentLayoutOptions,
         left: currentLayoutOptions.left - diff
       });
-      
+
       return width;
     }
 
@@ -165,7 +165,7 @@ export const DraggableBox = function DraggableBox({
 
           <Rnd
             style={{ ...style }}
-            size={{ width: scaleWidth(currentLayoutOptions.width, scaleValue),  height: currentLayoutOptions.height + 6}}
+            size={{ width: scaleWidth(currentLayoutOptions.width, scaleValue) + 6,  height: currentLayoutOptions.height + 6}}
             position={{ x: currentLayoutOptions ? currentLayoutOptions.left : 0, y: currentLayoutOptions ? currentLayoutOptions.top : 0 }}
             defaultSize={{}}
             className={`resizer ${mouseOver ? 'resizer-active' : ''}`}