fix chart resize when toggling nav bar

ui/shared/chart/useChartSize.tsx

@@ -16,18 +16,26 @@ export default function useChartSize(svgEl: SVGSVGElement | null, margin?: Chart
   }, [ calculateRect ]);
 
   React.useEffect(() => {
+    const content = window.document.querySelector('main');
+    if (!content) {
+      return;
+    }
+
     let timeoutId: number;
     const resizeHandler = _debounce(() => {
       setRect({ width: 0, height: 0 });
       timeoutId = window.setTimeout(() => {
         setRect(calculateRect());
       }, 0);
-    }, 100);
+    }, 200);
+
     const resizeObserver = new ResizeObserver(resizeHandler);
+    resizeObserver.observe(content);
+    resizeObserver.observe(window.document.body);
 
-    resizeObserver.observe(document.body);
     return function cleanup() {
-      resizeObserver.unobserve(document.body);
+      resizeObserver.unobserve(content);
+      resizeObserver.unobserve(window.document.body);
       window.clearTimeout(timeoutId);
     };
   }, [ calculateRect ]);

ui/stats/ChartWidgetGraph.tsx

@@ -56,7 +56,7 @@ const ChartWidgetGraph = ({ items, onZoom, isZoomResetInitial, title }: Props) =
   return (
     <svg width="100%" height="100%" ref={ ref } cursor="pointer" id={ chartId }>
 
-      <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` } opacity={ 1 }>
+      <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` } opacity={ innerWidth ? 1 : 0 }>
         <ChartGridLine
           type="horizontal"
           scale={ yScale }