fix: change panning cursor to col-resize (#2071)

* change panning cursor to col-resize

* revert to grabby, and support grabbing

src/components/LiquidityChartRangeInput/Chart.tsx

@@ -5,7 +5,7 @@ import { AxisBottom } from './AxisBottom'
 import { Brush } from './Brush'
 import { Line } from './Line'
 import { ChartEntry, LiquidityChartRangeInputProps } from './types'
-import Zoom from './Zoom'
+import Zoom, { ZoomOverlay } from './Zoom'
 
 export const xAccessor = (d: ChartEntry) => d.price0
 export const yAccessor = (d: ChartEntry) => d.activeLiquidity
@@ -117,7 +117,7 @@ export function Chart({
             <AxisBottom xScale={xScale} innerHeight={innerHeight} />
           </g>
 
-          <rect width={innerWidth} height={height} fill="transparent" ref={zoomRef} cursor="grab" />
+          <ZoomOverlay width={innerWidth} height={height} ref={zoomRef} />
 
           <Brush
             id={id}

src/components/LiquidityChartRangeInput/Zoom.tsx

@@ -26,6 +26,15 @@ const Button = styled(ButtonGray)`
   padding: 4px;
 `
 
+export const ZoomOverlay = styled.rect`
+  fill: transparent;
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+`
+
 export default function Zoom({
   svg,
   xScale,