disable svg selection

theme/global.ts

@@ -9,6 +9,10 @@ const global = (props: StyleFunctionProps) => ({
     ...getDefaultTransitionProps(),
     '-webkit-tap-highlight-color': 'transparent',
   },
+  'svg *::selection': {
+    color: 'none',
+    background: 'none',
+  },
   form: {
     w: '100%',
   },

ui/charts/EthereumDailyTxsChart.tsx

@@ -43,7 +43,7 @@ const EthereumDailyTxsChart = () => {
   }, [ ]);
 
   return (
-    <Box display="inline" position="relative">
+    <Box display="inline-block" position="relative" width="100%" height="100%">
       <svg width={ width || '100%' } height={ height || '100%' } ref={ ref }>
         <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` } opacity={ width ? 1 : 0 }>
           { /* BASE GRID LINE */ }

ui/shared/chart/ChartAxis.tsx

@@ -35,7 +35,6 @@ const ChartAxis = ({ type, scale, ticks, tickFormat, disableAnimation, anchorEl,
     axisGroup.select('.domain').remove();
     axisGroup.selectAll('line').remove();
     axisGroup.selectAll('text')
-      .attr('user-select', 'none')
       .attr('opacity', 1)
       .attr('color', textColor)
       .attr('font-size', '0.75rem');

ui/shared/chart/ChartTooltip.tsx

@@ -55,7 +55,6 @@ const ChartTooltip = ({ xScale, yScale, width, height, data, margin: _margin, an
 
       tooltipContent
         .select('.ChartTooltip__contentTitle')
-        .attr('user-select', 'none')
         .text(d3.timeFormat('%b %d, %Y')(xScale.invert(x)));
     },
     [ xScale, margin, width ],
@@ -63,7 +62,6 @@ const ChartTooltip = ({ xScale, yScale, width, height, data, margin: _margin, an
 
   const onChangePosition = React.useCallback((d: TimeChartItem, isVisible: boolean) => {
     d3.select('.ChartTooltip__value')
-      .attr('user-select', 'none')
       .text(isVisible ? d.value.toLocaleString() : '');
   }, []);