fix changing size of interface in new position and position details

src/components/NewPosition/DepositSelector/style.ts

@@ -52,7 +52,7 @@ const useStyles = makeStyles(() => ({
   },
   addButton: {
     width: '100%',
-    marginTop: 24,
+    margin: '30px 0',
     cursor: 'default'
   },
   hoverButton: {

src/components/NewPosition/PoolInit/PoolInit.tsx

@@ -113,44 +113,46 @@ export const PoolInit: React.FC<IPoolInit> = ({
 
   return (
     <Grid container direction='column' className={classes.wrapper}>
-      <Typography className={classes.header}>Starting price</Typography>
       <Grid
         container
         className={classes.innerWrapper}
         direction='column'
         justifyContent='flex-start'>
-        <Grid className={classes.infoWrapper}>
-          <Typography className={classes.info}>
-            This pool does not exist yet. To create it, select the fee tier, initial price, and
-            enter the amount of tokens. The estimated cost of creating a pool is 0.1 ETH.
-          </Typography>
-        </Grid>
+        <Grid className={classes.topInnerWrapper}>
+          <Typography className={classes.header}>Starting price</Typography>
+
+          <Grid className={classes.infoWrapper}>
+            <Typography className={classes.info}>
+              This pool does not exist yet. To create it, select the fee tier, initial price, and
+              enter the amount of tokens. The estimated cost of creating a pool is 0.1 ETH.
+            </Typography>
+          </Grid>
+
+          <SimpleInput
+            setValue={setMidPriceInput}
+            value={midPriceInput}
+            decimal={isXtoY ? xDecimal : yDecimal}
+            className={classes.midPrice}
+            placeholder='0.0'
+          />
 
-        <SimpleInput
-          setValue={setMidPriceInput}
-          value={midPriceInput}
-          decimal={isXtoY ? xDecimal : yDecimal}
-          className={classes.midPrice}
-          placeholder='0.0'
-        />
-
-        <Grid
-          className={classes.priceWrapper}
-          container
-          justifyContent='space-between'
-          alignItems='center'>
-          <Typography className={classes.priceLabel}>{tokenASymbol} starting price: </Typography>
-
-          <Typography className={classes.priceValue}>
-            <AnimatedNumber
-              value={price.toFixed(isXtoY ? xDecimal : yDecimal)}
-              duration={300}
-              formatValue={formatNumbers()}
-            />
-            {showPrefix(price)} {tokenBSymbol}
-          </Typography>
+          <Grid
+            className={classes.priceWrapper}
+            container
+            justifyContent='space-between'
+            alignItems='center'>
+            <Typography className={classes.priceLabel}>{tokenASymbol} starting price: </Typography>
+
+            <Typography className={classes.priceValue}>
+              <AnimatedNumber
+                value={price.toFixed(isXtoY ? xDecimal : yDecimal)}
+                duration={300}
+                formatValue={formatNumbers()}
+              />
+              {showPrefix(price)} {tokenBSymbol}
+            </Typography>
+          </Grid>
         </Grid>
-
         <Typography className={classes.subheader}>Set price range</Typography>
         <Grid container className={classes.inputs}>
           <RangeInput

src/components/NewPosition/PoolInit/style.ts

@@ -5,8 +5,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     borderRadius: 10,
     backgroundColor: colors.invariant.component,
-    padding: 24,
-    paddingTop: 16,
+    padding: '16px 24px 8px 24px',
     flex: '1 1 0%'
   },
   header: {
@@ -19,7 +18,11 @@ const useStyles = makeStyles((theme: Theme) => ({
     borderRadius: 8,
     backgroundColor: colors.invariant.component,
     width: '100%',
-    position: 'relative'
+    position: 'relative',
+    gap: 4
+  },
+  topInnerWrapper: {
+    minHeight: 283
   },
   subheader: {
     ...typography.heading4,

src/components/NewPosition/RangeSelector/style.ts

@@ -5,8 +5,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     borderRadius: 10,
     backgroundColor: colors.invariant.component,
-    padding: 24,
-    paddingTop: 16,
+    padding: '16px 24px 8px 24px',
     flex: '1 1 0%'
   },
   headerContainer: {
@@ -21,19 +20,16 @@ const useStyles = makeStyles((theme: Theme) => ({
     backgroundColor: colors.invariant.component,
     width: '100%',
     position: 'relative',
-    flex: '1 1 0%'
+    gap: 4
   },
   plot: {
     width: '100%',
     height: 185
   },
   subheader: {
     ...typography.heading4,
-    marginBottom: 10,
-    color: colors.white.main,
-    [theme.breakpoints.down('sm')]: {
-      marginBlock: 16
-    }
+    marginBottom: 14,
+    color: colors.white.main
   },
   inputs: {
     marginBottom: 8,
@@ -211,6 +207,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginLeft: 16
   },
   currentPrice: {
+    display: 'inline-block',
     color: colors.invariant.yellow,
     ...typography.caption2,
     textAlign: 'right'

src/components/PositionDetails/SinglePositionInfo/style.ts

@@ -3,7 +3,10 @@ import { colors, typography } from '@static/theme'
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
-    width: '100%'
+    width: '100%',
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column'
   },
   iconsGrid: {
     display: 'flex',
@@ -100,7 +103,11 @@ const useStyles = makeStyles((theme: Theme) => ({
     background: colors.invariant.component,
     marginTop: 20,
     padding: 24,
-    borderRadius: 24
+    borderRadius: 24,
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
   },
   iconSmall: {
     width: 20,

src/pages/SinglePositionPage/SinglePositionPage.tsx

@@ -12,7 +12,9 @@ export const SinglePositionPage: React.FC<IProps> = ({ id }) => {
 
   return (
     <Grid container className={classes.container} justifyContent='center'>
-      <SinglePositionWrapper id={id} />
+      <Grid item>
+        <SinglePositionWrapper id={id} />
+      </Grid>
     </Grid>
   )
 }