fixes for safari

ui/address/coinBalance/AddressCoinBalanceChart.tsx

@@ -25,7 +25,7 @@ const AddressCoinBalanceChart = ({ addressHash }: Props) => {
       title="Balances"
       items={ items }
       isLoading={ isLoading }
-      chartHeight="250px"
+      h="250px"
     />
   );
 };

ui/shared/chart/ChartWidget.tsx

 import {
   Box,
   Center,
+  chakra,
   Flex,
   Grid,
   Icon,
@@ -37,13 +38,13 @@ type Props = {
   title: string;
   description?: string;
   isLoading: boolean;
-  chartHeight?: string;
+  className?: string;
   isError: boolean;
 }
 
 const DOWNLOAD_IMAGE_SCALE = 5;
 
-const ChartWidget = ({ items, title, description, isLoading, chartHeight, isError }: Props) => {
+const ChartWidget = ({ items, title, description, isLoading, className, isError }: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   const [ isFullscreen, setIsFullscreen ] = useState(false);
   const [ isZoomResetInitial, setIsZoomResetInitial ] = React.useState(true);
@@ -144,7 +145,7 @@ const ChartWidget = ({ items, title, description, isLoading, chartHeight, isErro
     }
 
     return (
-      <Box h={ chartHeight || 'auto' } maxW="100%">
+      <Box h="100%" maxW="100%">
         <ChartWidgetGraph
           items={ items }
           onZoom={ handleZoom }
@@ -158,7 +159,7 @@ const ChartWidget = ({ items, title, description, isLoading, chartHeight, isErro
   return (
     <>
       <Box
-        height={ chartHeight }
+        height="100%"
         display="flex"
         flexDirection="column"
         ref={ ref }
@@ -166,6 +167,7 @@ const ChartWidget = ({ items, title, description, isLoading, chartHeight, isErro
         borderRadius="md"
         border="1px"
         borderColor={ borderColor }
+        className={ className }
       >
         <Grid
           gridTemplateColumns="auto auto 36px"
@@ -276,4 +278,4 @@ const ChartWidget = ({ items, title, description, isLoading, chartHeight, isErro
   );
 };
 
-export default React.memo(ChartWidget);
+export default React.memo(chakra(ChartWidget));

ui/shared/chart/ChartWidgetSkeleton.tsx

@@ -3,10 +3,9 @@ import React from 'react';
 
 interface Props {
   hasDescription: boolean;
-  chartHeight?: string;
 }
 
-const ChartWidgetSkeleton = ({ hasDescription, chartHeight }: Props) => {
+const ChartWidgetSkeleton = ({ hasDescription }: Props) => {
   return (
     <Box
       height="235px"
@@ -15,7 +14,7 @@ const ChartWidgetSkeleton = ({ hasDescription, chartHeight }: Props) => {
       <Skeleton w="75%" h="24px"/>
       { hasDescription && <Skeleton w="50%" h="18px" mt={ 1 }/> }
 
-      <Skeleton w="100%" h={ chartHeight || '150px' } mt={ 5 }/>
+      <Skeleton w="100%" h="150px" mt={ 5 }/>
     </Box>
   );
 };

ui/stats/ChartWidgetContainer.tsx

@@ -45,7 +45,6 @@ const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError
 
   return (
     <ChartWidget
-      chartHeight="100%"
       isError={ isError }
       items={ items }
       title={ title }