feat: Contain screenshot node in chart node

Author: bprusinowski

app/components/chart-shared.tsx

@@ -70,6 +70,7 @@ export const CHART_GRID_ROW_COUNT = 7;
 export const useChartStyles = makeStyles<Theme, { removeBorder?: boolean }>(
   (theme) => ({
     root: {
+      position: "relative",
       flexGrow: 1,
       minWidth: 0,
       padding: theme.spacing(8),

app/utils/use-screenshot.ts

@@ -99,8 +99,12 @@ const makeScreenshot = async ({
     : false;
   // Add wrapper node to prevent overflow issues in the screenshot
   const wrapperNode = document.createElement("div");
+  wrapperNode.style.position = "absolute";
+  wrapperNode.style.left = "0";
+  wrapperNode.style.top = "0";
+  wrapperNode.style.zIndex = "999999";
   wrapperNode.style.width = `${node.offsetWidth}px`;
-  document.body.appendChild(wrapperNode);
+  node.appendChild(wrapperNode);
 
   const clonedNode = node.cloneNode(true) as HTMLElement;