From ab9c27edad95c90da4727449b33bc647c14c8949 Mon Sep 17 00:00:00 2001
From: Justin Domingue <judo@uniswap.org>
Date: Thu, 8 Jul 2021 15:52:31 -0700
Subject: [PATCH] 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 | 8 ++++++++
 src/components/LiquidityChartRangeInput/Chart.tsx    | 2 +-
 src/components/LiquidityChartRangeInput/index.tsx    | 1 -
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/InputStepCounter/InputStepCounter.tsx b/src/components/InputStepCounter/InputStepCounter.tsx
index f9bd2c2b4..eec708318 100644
--- a/src/components/InputStepCounter/InputStepCounter.tsx
+++ b/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)`
diff --git a/src/components/LiquidityChartRangeInput/Chart.tsx b/src/components/LiquidityChartRangeInput/Chart.tsx
index 9b907a818..8859cb96e 100644
--- a/src/components/LiquidityChartRangeInput/Chart.tsx
+++ b/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} />
diff --git a/src/components/LiquidityChartRangeInput/index.tsx b/src/components/LiquidityChartRangeInput/index.tsx
index 4299d6bbf..7fe7167ab 100644
--- a/src/components/LiquidityChartRangeInput/index.tsx
+++ b/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;