From a08e0abf4f6f611591ec5f76ee92a7710116dc15 Mon Sep 17 00:00:00 2001
From: "felix.gateru" <felix.gateru@gmail.com>
Date: Thu, 7 Mar 2024 19:58:56 +0300
Subject: [PATCH] Add final resizing function

Signed-off-by: felix.gateru <felix.gateru@gmail.com>
---
 ui/web/static/css/dashboards.css | 4 ++--
 ui/web/static/js/dashboard.js    | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/web/static/css/dashboards.css b/ui/web/static/css/dashboards.css
index 5ff13d27..51ce57cb 100644
--- a/ui/web/static/css/dashboards.css
+++ b/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;
 }
diff --git a/ui/web/static/js/dashboard.js b/ui/web/static/js/dashboard.js
index 9e96a35f..11095c89 100644
--- a/ui/web/static/js/dashboard.js
+++ b/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;