Add final resizing function

Signed-off-by: felix.gateru <[email protected]>

ui/web/static/css/dashboards.css

@@ -11,10 +11,10 @@ SPDX-License-Identifier: Apache-2.0 */
 }
 
 .grid-editable {
-  background-size: calc(10rem + 10px) calc(10rem + 10px);
+  background-size: 25px 25px;
   background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
     linear-gradient(to bottom, lightgrey 1px, transparent 1px);
-
+  background-position: 5px 5px;
   min-width: 100%;
   min-height: 50vh;
 }

ui/web/static/js/dashboard.js

@@ -3,7 +3,7 @@
 const gridClass = ".grid";
 const editableGridClass = ".grid-editable";
 var grid = initGrid(layout);
-const gridSize = 50;
+const gridSize = 25;
 
 // Editable canvas is used to make the canvas editable allowing the user to add widgets and be able to move the
 // widgets around the canvas
@@ -232,6 +232,12 @@ const resizeObserver = new ResizeObserver((entries) => {
       });
 
       const finalizeResize = (event) => {
+        let finalWidth = snapToGrid(resizeHelper.offsetWidth);
+        let finalHeight = snapToGrid(resizeHelper.offsetHeight);
+
+        target.style.width = `${finalWidth}px`;
+        target.style.height = `${finalHeight}px`;
+
         contentEl.style.width = resizeHelper.style.width;
         contentEl.style.height = resizeHelper.style.height;