diff --git a/ui/web/static/css/dashboards.css b/ui/web/static/css/dashboards.css
index 11e5b6720..5ff13d270 100644
--- a/ui/web/static/css/dashboards.css
+++ b/ui/web/static/css/dashboards.css
@@ -121,5 +121,12 @@ SPDX-License-Identifier: Apache-2.0 */
 }
 
 .resize-helper {
-  border: 10px dotted #000; /* Customize as needed */
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  border: 1px dashed #1d2231;
+  pointer-events: none;
 }
diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
index fc202134e..4105c7791 100644
--- a/ui/web/static/js/charts.js
+++ b/ui/web/static/js/charts.js
@@ -1836,13 +1836,6 @@ class Widget {
     this.widgetID = widgetID;
     this.config = new chartTypes[this.chartData.Type](chartData, widgetID);
     this.element = this.#createWidgetElement();
-    this.resizeObserver = this.initResizeObserver();
-    this.resizeObserver.observe(this.element);
-    this.previousSizes = new Map();
-    this.previousChartSize = {
-      width: 400,
-      height: 400,
-    };
   }
 
   #createWidgetElement() {
@@ -1869,101 +1862,4 @@ class Widget {
     });
     return newItem;
   }
-
-  initResizeObserver() {
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        const { target } = entry;
-        const previousSize = previousSizes.get(target) || {
-          width: target.clientWidth,
-          height: target.clientHeight,
-        };
-        const contentEl = target.querySelector(".item-content");
-        const gridRightPosition = target.parentNode.getBoundingClientRect().right;
-        const widgetRightPosition = target.getBoundingClientRect().right;
-        const isOverflowing = widgetRightPosition > gridRightPosition;
-        if (isOverflowing) {
-          target.style.maxWidth = target.clientWidth + "px";
-          target.style.maxHeight = target.clientHeight + "px";
-        } else {
-          target.style.maxWidth = "none";
-          target.style.maxHeight = "none";
-        }
-
-        if (widgetRightPosition < gridRightPosition - 5) {
-          // Calculate the change in width and height
-          var widthChange = target.clientWidth - previousSize.width;
-          var heightChange = target.clientHeight - previousSize.height;
-          var itemContentWidth =
-            parseInt(window.getComputedStyle(contentEl).getPropertyValue("width")) + widthChange;
-          var itemContentHeight =
-            parseInt(window.getComputedStyle(contentEl).getPropertyValue("height")) + heightChange;
-
-          // Update the previous size for the next callback
-          previousSizes.set(target, {
-            width: target.clientWidth,
-            height: target.clientHeight,
-          });
-
-          target.style.width = target.clientWidth + "px";
-          target.style.height = target.clientHeight + "px";
-
-          contentEl.style.width = itemContentWidth + "px";
-          contentEl.style.height = itemContentHeight + "px";
-
-          // Resize apache echarts chart
-          const chart = echarts.getInstanceByDom(contentEl);
-          if (chart) {
-            chart.resize({
-              width: itemContentWidth,
-              height: itemContentHeight,
-            });
-          } else {
-            const cardDiv = target.querySelector(".widgetcard");
-            const h5Elem = cardDiv.querySelector("h5");
-            const cardBody = cardDiv.querySelector(".card-body");
-            const cardFooter = cardDiv.querySelector(".card-footer");
-
-            if (entry.contentBoxSize) {
-              // The standard makes contentBoxSize an array...
-              if (entry.contentBoxSize[0]) {
-                h5Elem.style.fontSize =
-                  Math.max(1, entry.contentBoxSize[0].inlineSize / 300) + "rem";
-                if (cardBody) {
-                  cardBody.style.fontSize =
-                    Math.max(1.5, entry.contentBoxSize[0].inlineSize / 300) + "rem";
-                }
-                if (cardFooter) {
-                  cardFooter.style.fontSize =
-                    Math.max(1, entry.contentBoxSize[0].inlineSize / 600) + "rem";
-                }
-              } else {
-                // ...but old versions of Firefox treat it as a single item
-                h5Elem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize / 300) + "rem";
-                if (cardBody) {
-                  cardBody.style.fontSize =
-                    Math.max(1.5, entry.contentBoxSize.inlineSize / 300) + "rem";
-                }
-                if (cardFooter) {
-                  cardFooter.style.fontSize =
-                    Math.max(1, entry.contentBoxSize.inlineSize / 600) + "rem";
-                }
-              }
-            } else {
-              h5Elem.style.fontSize = `${Math.max(1, entry.contentRect.width / 300)}rem`;
-              if (cardBody) {
-                cardBody.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 300)}rem`;
-              }
-              if (cardFooter) {
-                cardFooter.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
-              }
-            }
-          }
-          // grid.refreshItems();
-          // grid.layout(true);
-        }
-      }
-    });
-    return resizeObserver;
-  }
 }
diff --git a/ui/web/static/js/dashboard.js b/ui/web/static/js/dashboard.js
index 8f2dab5f2..4aef886d8 100644
--- a/ui/web/static/js/dashboard.js
+++ b/ui/web/static/js/dashboard.js
@@ -16,7 +16,7 @@ function cancelEdit() {
 function addWidget(chartData, widgetID) {
   let newItem = new Widget(chartData, widgetID);
   grid.add(newItem.element);
-  // resizeObserver.observe(newItem.element);
+  resizeObserver.observe(newItem.element);
 }
 
 function removeGridItem(item) {
@@ -172,7 +172,7 @@ function editableCanvas() {
             height: widgetSize.height,
           });
           grid.add(newItem, { layout: true });
-          // resizeObserver.observe(newItem);
+          resizeObserver.observe(newItem);
         });
         grid.layout();
       }
@@ -189,6 +189,115 @@ function editableCanvas() {
   return grid;
 }
 
+const previousSizes = new Map();
+
+const resizeObserver = new ResizeObserver((entries) => {
+  for (let entry of entries) {
+    const { target } = entry;
+    addResizeHelper(target);
+    border
+    const resizeHelper = target.querySelector(".resize-helper");
+    const previousSize = previousSizes.get(target) || {
+      width: target.clientWidth,
+      height: target.clientHeight,
+    };
+    const contentEl = target.querySelector(".item-content");
+    const gridRightPosition = target.parentNode.getBoundingClientRect().right;
+    const widgetRightPosition = resizeHelper.getBoundingClientRect().right;
+    const isOverflowing = widgetRightPosition > gridRightPosition;
+    if (isOverflowing) {
+      resizeHelper.style.maxWidth = target.clientWidth + "px";
+      resizeHelper.style.maxHeight = target.clientHeight + "px";
+    } else {
+      resizeHelper.style.maxWidth = "none";
+      resizeHelper.style.maxHeight = "none";
+    }
+
+    if (widgetRightPosition < gridRightPosition - 5) {
+      // Calculate the change in width and height
+      // var widthChange =
+      //   parseInt(window.getComputedStyle(resizeHelper).getPropertyValue("width")) -
+      //   previousSize.width;
+      // var heightChange =
+      //   parseInt(window.getComputedStyle(resizeHelper).getPropertyValue("height")) -
+      //   previousSize.height;
+      // console.log("widthChange", widthChange, "heightChange", heightChange);
+      // var itemContentWidth =
+      //   parseInt(window.getComputedStyle(contentEl).getPropertyValue("width")) + widthChange;
+      // var itemContentHeight =
+      //   parseInt(window.getComputedStyle(contentEl).getPropertyValue("height")) + heightChange;
+
+      resizeHelper.style.width = target.clientWidth + "px";
+      resizeHelper.style.height = target.clientHeight + "px";
+
+      previousSizes.set(target, {
+        width: parseInt(window.getComputedStyle(resizeHelper).getPropertyValue("width")),
+        height: parseInt(window.getComputedStyle(resizeHelper).getPropertyValue("height")),
+      });
+
+      const finalizeResize = (event) => {
+        contentEl.style.width = resizeHelper.style.width;
+        contentEl.style.height = resizeHelper.style.height;
+
+        // Resize apache echarts chart
+        const chart = echarts.getInstanceByDom(contentEl);
+        if (chart) {
+          chart.resize({
+            width: parseInt(window.getComputedStyle(resizeHelper).getPropertyValue("width")),
+            height: parseInt(window.getComputedStyle(resizeHelper).getPropertyValue("height")),
+          });
+        } else {
+          const cardDiv = target.querySelector(".widgetcard");
+          const h5Elem = cardDiv.querySelector("h5");
+          const cardBody = cardDiv.querySelector(".card-body");
+          const cardFooter = cardDiv.querySelector(".card-footer");
+
+          if (entry.contentBoxSize) {
+            // The standard makes contentBoxSize an array...
+            if (entry.contentBoxSize[0]) {
+              h5Elem.style.fontSize = Math.max(1, entry.contentBoxSize[0].inlineSize / 300) + "rem";
+              if (cardBody) {
+                cardBody.style.fontSize =
+                  Math.max(1.5, entry.contentBoxSize[0].inlineSize / 300) + "rem";
+              }
+              if (cardFooter) {
+                cardFooter.style.fontSize =
+                  Math.max(1, entry.contentBoxSize[0].inlineSize / 600) + "rem";
+              }
+            } else {
+              // ...but old versions of Firefox treat it as a single item
+              h5Elem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize / 300) + "rem";
+              if (cardBody) {
+                cardBody.style.fontSize =
+                  Math.max(1.5, entry.contentBoxSize.inlineSize / 300) + "rem";
+              }
+              if (cardFooter) {
+                cardFooter.style.fontSize =
+                  Math.max(1, entry.contentBoxSize.inlineSize / 600) + "rem";
+              }
+            }
+          } else {
+            h5Elem.style.fontSize = `${Math.max(1, entry.contentRect.width / 300)}rem`;
+            if (cardBody) {
+              cardBody.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 300)}rem`;
+            }
+            if (cardFooter) {
+              cardFooter.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
+            }
+          }
+        }
+        grid.refreshItems();
+        grid.layout(true);
+        document.removeEventListener("mouseup", finalizeResize);
+        console.log("Resize finalized");
+        // resizeHelper.remove();
+      };
+      document.addEventListener("mouseup", finalizeResize);
+      // Update the previous size for the next callback
+    }
+  }
+});
+
 // No widget placeholder
 function showNoWidgetPlaceholder() {
   const noWidgetPlaceholder = document.querySelector(".no-widget-placeholder");
@@ -245,3 +354,9 @@ function updateMetadata(layout, savedMetadata) {
   }
   return upMetadata;
 }
+
+function addResizeHelper(element) {
+  const resizeHelper = document.createElement("div");
+  resizeHelper.classList.add("resize-helper");
+  element.appendChild(resizeHelper);
+}