fix: make liquidity chart and input step counter responsive (#2005)

* make chart responsive

* make input step counter text responsive

* clean up chart

src/components/InputStepCounter/InputStepCounter.tsx

@@ -46,6 +46,14 @@ const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
   width: 100%;
   font-weight: 500;
   padding: 0 10px;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    font-size: 16px;
+  `};
+
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+    font-size: 12px;
+  `};
 `
 
 const InputTitle = styled(TYPE.small)`

src/components/LiquidityChartRangeInput/Chart.tsx

@@ -68,7 +68,7 @@ export function Chart({
         innerHeight={innerHeight}
         showClear={Boolean(zoom && zoom.k !== 1)}
       />
-      <svg ref={svgRef} style={{ overflow: 'visible' }} width={width} height={height}>
+      <svg ref={svgRef} width="100%" height="100%" viewBox={`0 0 ${width} ${height}`} style={{ overflow: 'visible' }}>
         <defs>
           <clipPath id={`${id}-chart-clip`}>
             <rect x="0" y="0" width={innerWidth} height={height} />

src/components/LiquidityChartRangeInput/index.tsx

@@ -18,7 +18,6 @@ import { FeeAmount } from '@uniswap/v3-sdk'
 import ReactGA from 'react-ga'
 
 const ChartWrapper = styled.div`
-  display: grid;
   position: relative;
 
   justify-content: center;