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

* make chart responsive * make input step counter text responsive * clean up chart
gnosis · Jul 8, 2021 · ab9c27e · ab9c27e
1 parent f2dfc57
commit ab9c27e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;