fix: fix report-item layout calc script [PT-186921649]

packages/tecrock-table/src/components/report-item/report-item.tsx

@@ -25,16 +25,41 @@ function runInReportItem() {
   if (!tableParent) {
     return;
   }
-  if (table.offsetWidth > tableParent.offsetWidth) {
-    // Table is wider than its parent, there is a horizontal scrollbar, so we need to scale it down.
-    const originalWidth = table.offsetWidth;
-    const originalHeight = table.offsetHeight;
-    const scale = tableParent.offsetWidth / (originalWidth + 1);
-    table.style.transform = `scale(${scale})`;
-    table.style.width = tableParent.style.width = `${scale * originalWidth}px`;
-    table.style.height = tableParent.style.height = (scale * originalHeight) + "px";
-    tableParent.style.overflow = "hidden";
+
+  // ResizeObserver is necessary to handle situations when Dashboard is animating the width of the report item container.
+  let firstResize = true;
+  let resizeTimeout: number | null = null;
+  let prevWidth = -Infinity;
+  function onResize() {
+    if (resizeTimeout) {
+      clearTimeout(resizeTimeout);
+    }
+    function resize() {
+      if (!tableParent) {
+        return;
+      }
+      if (tableParent.clientWidth === prevWidth) {
+        return;
+      }
+      const originalWidth = table.clientWidth;
+      const originalHeight = table.clientHeight;
+      const scale = tableParent.clientWidth / originalWidth;
+      table.style.transform = `scale(${scale})`;
+      table.style.width = `${Math.round(scale * originalWidth)}px`;
+      table.style.height = tableParent.style.height = `${Math.round(scale * originalHeight)}px`;
+      firstResize = false;
+      prevWidth = tableParent.clientWidth;
+    }
+    if (firstResize) {
+      resize();
+    } else {
+      resizeTimeout = window.setTimeout(resize, 100);
+    }
   }
+  const resizeObserver = new ResizeObserver(onResize);
+  resizeObserver.observe(document.body);
+  tableParent.style.overflow = "hidden";
+
   // Set up the snapshot click handler. This is implemented in the Table component, but it won't work in the report
   // item because the component is rendered to a string and sent in that form. Fortunately, it's easy to
   // reimplement it here.
@@ -51,7 +76,7 @@ function runInReportItem() {
 const reportItemScript = "<script>" + runInReportItem.toString() + `\n ${runInReportItem.name}(); </script>`;
 
 export const reportItemHandler: IGetReportItemAnswerHandler<ITectonicExplorerInteractiveState, IAuthoredState> = request => {
-  const {platformUserId, version, itemsType} = request;
+  const { platformUserId, version, itemsType } = request;
 
   if (!version) {
     // for hosts sending older, unversioned requests
@@ -71,8 +96,8 @@ export const reportItemHandler: IGetReportItemAnswerHandler<ITectonicExplorerInt
       // DOM mutation observers to detect when the table is rendered or relying on other callbacks or timing tricks.
       reportItemScript;
 
-    items.push({type: "html", html: htmlWithInlineStyles});
-    sendReportItemAnswer({version, platformUserId, items, itemsType});
+    items.push({ type: "html", html: htmlWithInlineStyles });
+    sendReportItemAnswer({ version, platformUserId, items, itemsType });
   } else {
     // tslint:disable-next-line:no-console
     console.error(