From 0f968e2228c71adb630dd10ffe7d813f446d28e3 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Wed, 26 Jun 2024 16:10:09 +0200
Subject: [PATCH 1/4] fix mobile issues

---
 src/components/Header/Header.tsx                 |  8 ++++++--
 src/components/Header/style.ts                   | 10 ++++++----
 src/components/Modals/AddTokenModal/style.ts     |  1 +
 .../SelectTokenModal/SelectTokenModal.tsx        |  2 +-
 src/components/Modals/SelectModals/style.ts      |  5 +++++
 .../ConcentrationTypeSwitch.tsx                  |  2 +-
 .../NewPosition/DepositSelector/style.ts         |  8 ++++++--
 src/components/NewPosition/PoolInit/style.ts     |  5 ++++-
 .../NewPosition/RangeSelector/style.ts           |  8 ++++++--
 src/components/NoConnected/style.tsx             |  5 ++++-
 .../LiquidationRangeInfo/style.ts                |  3 ++-
 .../PositionDetails/SinglePositionInfo/style.ts  |  3 ++-
 .../PositionDetails/SinglePositionPlot/style.ts  |  6 +++++-
 .../PositionsList/PositionItem/style.tsx         |  6 +++++-
 src/components/PositionsList/PositionsList.tsx   |  2 +-
 src/components/PositionsList/style.ts            |  3 ++-
 src/components/Snackbar/style.ts                 | 16 ++++++++--------
 src/components/Swap/style.ts                     |  8 ++++++--
 src/pages/ListPage/styles.ts                     |  2 +-
 src/pages/NewPositionPage/styles.ts              |  2 +-
 src/pages/SinglePositionPage/styles.ts           |  2 +-
 src/pages/StatsPage/styles.ts                    |  2 +-
 22 files changed, 75 insertions(+), 34 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d0d3e496..c7641400 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -97,7 +97,11 @@ export const Header: React.FC<IHeader> = ({
             justifyContent='flex-start'
             sx={{ display: { xs: 'block', md: 'none' } }}>
             <Grid container>
-              <CardMedia className={classes.logoShort} image={icons.LogoShort} />
+              <CardMedia
+                className={classes.logoShort}
+                image={icons.LogoShort}
+                onClick={() => navigate('/swap')}
+              />
             </Grid>
           </Grid>
         </Box>
@@ -124,7 +128,7 @@ export const Header: React.FC<IHeader> = ({
           ))}
         </Grid>
 
-        <Grid container item className={classes.buttons} wrap='nowrap' gap={1.5}>
+        <Grid container item className={classes.buttons} wrap='nowrap'>
           {typeOfNetwork === Network.Testnet ? (
             <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
               <Button
diff --git a/src/components/Header/style.ts b/src/components/Header/style.ts
index 14f572a0..ca5564ae 100644
--- a/src/components/Header/style.ts
+++ b/src/components/Header/style.ts
@@ -19,7 +19,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       },
 
       [theme.breakpoints.down('sm')]: {
-        paddingInline: 16
+        paddingInline: 8
       }
     },
     logo: {
@@ -58,6 +58,7 @@ const useStyles = makeStyles()((theme: Theme) => {
     buttons: {
       justifyContent: 'flex-end',
       flex: '1 1 0%',
+      gap: 12,
 
       [theme.breakpoints.up('lg')]: {
         minWidth: 350
@@ -68,11 +69,12 @@ const useStyles = makeStyles()((theme: Theme) => {
       },
 
       [theme.breakpoints.down('md')]: {
-        marginLeft: 0
+        marginLeft: 0,
+        justifyContent: 'center'
       },
 
-      [theme.breakpoints.down('md')]: {
-        justifyContent: 'center'
+      [theme.breakpoints.down('sm')]: {
+        gap: 4
       }
     },
     buttonsLgConnected: {
diff --git a/src/components/Modals/AddTokenModal/style.ts b/src/components/Modals/AddTokenModal/style.ts
index dcba6747..8f651fdd 100644
--- a/src/components/Modals/AddTokenModal/style.ts
+++ b/src/components/Modals/AddTokenModal/style.ts
@@ -40,6 +40,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       maxWidth: 16,
       fontSize: 20,
       background: 'none',
+      color: colors.white.main,
       '&:hover': {
         background: 'none !important'
       }
diff --git a/src/components/Modals/SelectModals/SelectTokenModal/SelectTokenModal.tsx b/src/components/Modals/SelectModals/SelectTokenModal/SelectTokenModal.tsx
index 941a654d..07c08405 100644
--- a/src/components/Modals/SelectModals/SelectTokenModal/SelectTokenModal.tsx
+++ b/src/components/Modals/SelectModals/SelectTokenModal/SelectTokenModal.tsx
@@ -67,7 +67,7 @@ export const SelectTokenModal: React.FC<ISelectTokenModal> = ({
   onHideUnknownTokensChange
 }) => {
   const { classes } = useStyles()
-  const isXs = useMediaQuery(theme.breakpoints.down('xs'))
+  const isXs = useMediaQuery(theme.breakpoints.down('sm'))
 
   const [value, setValue] = useState<string>('')
 
diff --git a/src/components/Modals/SelectModals/style.ts b/src/components/Modals/SelectModals/style.ts
index 14faf852..6725970d 100644
--- a/src/components/Modals/SelectModals/style.ts
+++ b/src/components/Modals/SelectModals/style.ts
@@ -68,6 +68,11 @@ const useStyles = makeStyles()((theme: Theme) => {
       borderColor: colors.invariant.newDark,
       borderRadius: 15,
       padding: '18px 10px 17px 10px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      paddingRight: 32,
+
       '&::placeholder': {
         color: colors.invariant.light,
         ...typography.body1
diff --git a/src/components/NewPosition/ConcentrationTypeSwitch/ConcentrationTypeSwitch.tsx b/src/components/NewPosition/ConcentrationTypeSwitch/ConcentrationTypeSwitch.tsx
index ee1d9ef8..a362c201 100644
--- a/src/components/NewPosition/ConcentrationTypeSwitch/ConcentrationTypeSwitch.tsx
+++ b/src/components/NewPosition/ConcentrationTypeSwitch/ConcentrationTypeSwitch.tsx
@@ -18,7 +18,7 @@ export const ConcentrationTypeSwitch: React.FC<IProps> = ({
   disabled = false,
   currentValue
 }) => {
-  const isXs = useMediaQuery(theme.breakpoints.down('xs'))
+  const isXs = useMediaQuery(theme.breakpoints.down('sm'))
 
   const { classes: tabsClasses } = useTabsStyles({ value: currentValue })
   const { classes: singleTabClasses } = useSingleTabStyles()
diff --git a/src/components/NewPosition/DepositSelector/style.ts b/src/components/NewPosition/DepositSelector/style.ts
index 62fc89f0..956c7344 100644
--- a/src/components/NewPosition/DepositSelector/style.ts
+++ b/src/components/NewPosition/DepositSelector/style.ts
@@ -1,14 +1,18 @@
 import { colors, typography } from '@static/theme'
 import { makeStyles } from 'tss-react/mui'
 
-export const useStyles = makeStyles()(() => {
+export const useStyles = makeStyles()(theme => {
   return {
     wrapper: {
       borderRadius: 10,
       backgroundColor: colors.invariant.component,
       padding: 24,
       paddingTop: 16,
-      flex: '1 1 0%'
+      flex: '1 1 0%',
+
+      [theme.breakpoints.down('sm')]: {
+        padding: '16px 8px  16px 8px '
+      }
     },
     sectionTitle: {
       ...typography.heading4,
diff --git a/src/components/NewPosition/PoolInit/style.ts b/src/components/NewPosition/PoolInit/style.ts
index 0e61196a..711e847c 100644
--- a/src/components/NewPosition/PoolInit/style.ts
+++ b/src/components/NewPosition/PoolInit/style.ts
@@ -7,7 +7,10 @@ const useStyles = makeStyles()(theme => {
       borderRadius: 10,
       backgroundColor: colors.invariant.component,
       padding: '16px 24px 8px 24px',
-      flex: '1 1 0%'
+      flex: '1 1 0%',
+      [theme.breakpoints.down('sm')]: {
+        padding: '16px 8px  16px 8px'
+      }
     },
     header: {
       ...typography.heading4,
diff --git a/src/components/NewPosition/RangeSelector/style.ts b/src/components/NewPosition/RangeSelector/style.ts
index b22c2463..7bc0bc23 100644
--- a/src/components/NewPosition/RangeSelector/style.ts
+++ b/src/components/NewPosition/RangeSelector/style.ts
@@ -8,7 +8,10 @@ const useStyles = makeStyles()(theme => {
       backgroundColor: colors.invariant.component,
       padding: '16px 24px 16px 24px',
       flex: '1 1 0%',
-      position: 'relative'
+      position: 'relative',
+      [theme.breakpoints.down('sm')]: {
+        padding: '16px 8px  16px 8px '
+      }
     },
     headerContainer: {
       marginBottom: 12
@@ -81,7 +84,8 @@ const useStyles = makeStyles()(theme => {
         right: 0,
         zIndex: 11,
         width: '100%',
-        borderRadius: 9
+        borderRadius: 9,
+        textAlign: 'center'
       }
     },
 
diff --git a/src/components/NoConnected/style.tsx b/src/components/NoConnected/style.tsx
index e198b460..02162c1e 100644
--- a/src/components/NoConnected/style.tsx
+++ b/src/components/NoConnected/style.tsx
@@ -16,7 +16,10 @@ export const useStyles = makeStyles()(() => ({
     justifyContent: 'center',
     paddingBottom: 25,
     width: '100%',
-    height: '100%'
+    height: '100%',
+    p: {
+      textAlign: 'center'
+    }
   },
   img: {
     paddingBottom: 25
diff --git a/src/components/PositionDetails/LiquidationRangeInfo/style.ts b/src/components/PositionDetails/LiquidationRangeInfo/style.ts
index 5511629d..fde94279 100644
--- a/src/components/PositionDetails/LiquidationRangeInfo/style.ts
+++ b/src/components/PositionDetails/LiquidationRangeInfo/style.ts
@@ -39,7 +39,8 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     display: 'flex',
     justifyContent: 'center',
     fontSize: 16,
-    width: '100%'
+    width: '100%',
+    padding: '0 4px'
   },
   infoAmount: {
     color: colors.invariant.text,
diff --git a/src/components/PositionDetails/SinglePositionInfo/style.ts b/src/components/PositionDetails/SinglePositionInfo/style.ts
index c74b3185..753c9f9e 100644
--- a/src/components/PositionDetails/SinglePositionInfo/style.ts
+++ b/src/components/PositionDetails/SinglePositionInfo/style.ts
@@ -103,7 +103,8 @@ export const useStyles = makeStyles()((theme: Theme) => ({
   bottomGrid: {
     background: colors.invariant.component,
     marginTop: 20,
-    padding: 24,
+    padding: 8,
+    paddingTop: 16,
     borderRadius: 24,
     flexGrow: 1,
     display: 'flex',
diff --git a/src/components/PositionDetails/SinglePositionPlot/style.ts b/src/components/PositionDetails/SinglePositionPlot/style.ts
index dfa495ac..38857c37 100644
--- a/src/components/PositionDetails/SinglePositionPlot/style.ts
+++ b/src/components/PositionDetails/SinglePositionPlot/style.ts
@@ -8,7 +8,11 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     backgroundColor: colors.invariant.component,
     padding: 24,
     paddingTop: 18,
-    borderRadius: 24
+    borderRadius: 24,
+    [theme.breakpoints.down('sm')]: {
+      padding: 8,
+      paddingTop: 16
+    }
   },
   headerContainer: {
     ...typography.heading4,
diff --git a/src/components/PositionsList/PositionItem/style.tsx b/src/components/PositionsList/PositionItem/style.tsx
index 496e186c..8f05249f 100644
--- a/src/components/PositionsList/PositionItem/style.tsx
+++ b/src/components/PositionsList/PositionItem/style.tsx
@@ -20,6 +20,9 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     [theme.breakpoints.down('lg')]: {
       padding: 16,
       flexWrap: 'wrap'
+    },
+    [theme.breakpoints.down('sm')]: {
+      padding: 8
     }
   },
   icons: {
@@ -82,7 +85,8 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     [theme.breakpoints.down('sm')]: {
-      ...typography.caption1
+      ...typography.caption1,
+      padding: '0 4px'
     }
   },
   activeInfoText: {
diff --git a/src/components/PositionsList/PositionsList.tsx b/src/components/PositionsList/PositionsList.tsx
index ca46b58e..3ef62e2b 100644
--- a/src/components/PositionsList/PositionsList.tsx
+++ b/src/components/PositionsList/PositionsList.tsx
@@ -103,7 +103,7 @@ export const PositionsList: React.FC<IProps> = ({
               onChange={handleChangeInput}
               value={searchValue}
             />
-            <Grid>
+            <Grid rowGap={1} justifyContent='space-between'>
               <Button
                 disabled={showNoConnected}
                 onClick={showNoConnected ? () => {} : handleRefresh}
diff --git a/src/components/PositionsList/style.ts b/src/components/PositionsList/style.ts
index 5635bf55..285f1cf7 100644
--- a/src/components/PositionsList/style.ts
+++ b/src/components/PositionsList/style.ts
@@ -43,7 +43,8 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    flexWrap: 'nowrap'
+    flexWrap: 'wrap',
+    rowGap: '8px'
   },
   searchBar: {
     width: 221,
diff --git a/src/components/Snackbar/style.ts b/src/components/Snackbar/style.ts
index 58f582cc..004f7d90 100644
--- a/src/components/Snackbar/style.ts
+++ b/src/components/Snackbar/style.ts
@@ -11,7 +11,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
     borderColor: colors.invariant.component,
     borderRadius: 10,
     ...typography.body2,
-    maxWidth: 330,
+    maxWidth: '100vw',
     width: 330,
     padding: '4px 16px',
     minWidth: 100,
@@ -29,7 +29,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
       }
     },
     [theme.breakpoints.down('sm')]: {
-      maxWidth: 'none',
+      maxWidth: 'calc(100vw - 64px)',
       width: 'auto'
     }
   },
@@ -40,7 +40,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
     borderColor: colors.invariant.component,
     borderRadius: 10,
     ...typography.body2,
-    maxWidth: 330,
+    maxWidth: '100vw',
     width: 330,
     padding: '4px 16px',
     minWidth: 100,
@@ -58,7 +58,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
       }
     },
     [theme.breakpoints.down('sm')]: {
-      maxWidth: 'none',
+      maxWidth: 'calc(100vw - 64px)',
       width: 'auto'
     }
   },
@@ -69,7 +69,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
     borderColor: colors.invariant.component,
     borderRadius: 10,
     ...typography.body2,
-    maxWidth: 330,
+    maxWidth: '100vw',
     width: 330,
     padding: '6px 16px',
     minWidth: 100,
@@ -87,7 +87,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
       }
     },
     [theme.breakpoints.down('sm')]: {
-      maxWidth: 'none',
+      maxWidth: 'calc(100vw - 64px)',
       width: 'auto'
     }
   },
@@ -98,7 +98,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
     borderColor: colors.invariant.component,
     borderRadius: 10,
     ...typography.body2,
-    maxWidth: 330,
+    maxWidth: '100vw',
     width: 330,
     padding: '6px 16px',
     minWidth: 100,
@@ -116,7 +116,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
       }
     },
     [theme.breakpoints.down('sm')]: {
-      maxWidth: 'none',
+      maxWidth: 'calc(100vw - 64px)',
       width: 'auto'
     }
   }
diff --git a/src/components/Swap/style.ts b/src/components/Swap/style.ts
index e8b8042a..1e8a8b30 100644
--- a/src/components/Swap/style.ts
+++ b/src/components/Swap/style.ts
@@ -7,7 +7,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column',
     [theme.breakpoints.down('sm')]: {
-      padding: '0 16px'
+      padding: '0 8px'
     }
   },
   header: {
@@ -45,6 +45,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     border: 'none',
     minWidth: 'auto',
     color: colors.invariant.lightHover,
+    padding: 'none',
     '&:hover': {
       filter: 'brightness(1.15)',
       cursor: 'pointer'
@@ -93,7 +94,10 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     paddingInline: 24,
     paddingBottom: 22,
     paddingTop: 16,
-    width: 500
+    width: 500,
+    [theme.breakpoints.down('sm')]: {
+      padding: '16px 8px'
+    }
   },
 
   connectWalletButton: {
diff --git a/src/pages/ListPage/styles.ts b/src/pages/ListPage/styles.ts
index 2c874ccd..84317ef0 100644
--- a/src/pages/ListPage/styles.ts
+++ b/src/pages/ListPage/styles.ts
@@ -19,7 +19,7 @@ const useStyles = makeStyles()(theme => {
       },
 
       [theme.breakpoints.down('sm')]: {
-        paddingInline: 16
+        paddingInline: 8
       }
     }
   }
diff --git a/src/pages/NewPositionPage/styles.ts b/src/pages/NewPositionPage/styles.ts
index 7c2605e7..3ed87a7d 100644
--- a/src/pages/NewPositionPage/styles.ts
+++ b/src/pages/NewPositionPage/styles.ts
@@ -20,7 +20,7 @@ const useStyles = makeStyles()(() => {
       },
 
       [theme.breakpoints.down('sm')]: {
-        paddingInline: 16
+        paddingInline: 8
       }
     }
   }
diff --git a/src/pages/SinglePositionPage/styles.ts b/src/pages/SinglePositionPage/styles.ts
index b2ed5734..4219f28e 100644
--- a/src/pages/SinglePositionPage/styles.ts
+++ b/src/pages/SinglePositionPage/styles.ts
@@ -18,7 +18,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       },
 
       [theme.breakpoints.down('sm')]: {
-        paddingInline: 16
+        paddingInline: 8
       }
     }
   }
diff --git a/src/pages/StatsPage/styles.ts b/src/pages/StatsPage/styles.ts
index c90f29ef..4c9791b9 100644
--- a/src/pages/StatsPage/styles.ts
+++ b/src/pages/StatsPage/styles.ts
@@ -20,7 +20,7 @@ export const useStyles = makeStyles()(() => ({
     },
 
     [theme.breakpoints.down('sm')]: {
-      paddingInline: 16
+      paddingInline: 8
     }
   }
 }))

From 6c178adafd602bad4ccdfa6b30d396866a9e8458 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Wed, 26 Jun 2024 17:07:44 +0200
Subject: [PATCH 2/4] fix header of position list

---
 src/components/PositionsList/PositionsList.tsx | 6 +++++-
 src/components/PositionsList/style.ts          | 9 +++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/PositionsList/PositionsList.tsx b/src/components/PositionsList/PositionsList.tsx
index 3ef62e2b..86cfe410 100644
--- a/src/components/PositionsList/PositionsList.tsx
+++ b/src/components/PositionsList/PositionsList.tsx
@@ -1,7 +1,7 @@
 import { EmptyPlaceholder } from '@components/EmptyPlaceholder/EmptyPlaceholder'
 import { INoConnected, NoConnected } from '@components/NoConnected/NoConnected'
 import { PaginationList } from '@components/PaginationList/PaginationList'
-import { Button, Grid, InputAdornment, InputBase, Typography } from '@mui/material'
+import { Button, Grid, InputAdornment, InputBase, Typography, useMediaQuery } from '@mui/material'
 import loader from '@static/gif/loader.gif'
 import SearchIcon from '@static/svg/lupaDark.svg'
 import refreshIcon from '@static/svg/refresh.svg'
@@ -9,6 +9,7 @@ import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { IPositionItem, PositionItem } from './PositionItem/PositionItem'
 import { useStyles } from './style'
+import { theme } from '@static/theme'
 
 interface IProps {
   initialPage: number
@@ -42,6 +43,8 @@ export const PositionsList: React.FC<IProps> = ({
   const [defaultPage] = useState(initialPage)
   const [page, setPage] = useState(initialPage)
 
+  const isXsDown = useMediaQuery(theme.breakpoints.down('sm'))
+
   const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     searchSetValue(e.target.value.toLowerCase())
   }
@@ -102,6 +105,7 @@ export const PositionsList: React.FC<IProps> = ({
               }
               onChange={handleChangeInput}
               value={searchValue}
+              inputMode='decimal'
             />
             <Grid rowGap={1} justifyContent='space-between'>
               <Button
diff --git a/src/components/PositionsList/style.ts b/src/components/PositionsList/style.ts
index 285f1cf7..2285c666 100644
--- a/src/components/PositionsList/style.ts
+++ b/src/components/PositionsList/style.ts
@@ -44,7 +44,11 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     justifyContent: 'space-between',
     alignItems: 'center',
     flexWrap: 'wrap',
-    rowGap: '8px'
+    rowGap: '8px',
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: 'column-reverse',
+      alignItems: 'flex-end'
+    }
   },
   searchBar: {
     width: 221,
@@ -56,7 +60,8 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     color: colors.invariant.lightGrey,
     ...typography.body2,
     [theme.breakpoints.down('sm')]: {
-      maxWidth: 200
+      width: '100%',
+      height: 48
     }
   },
   button: {

From cd49c999c51dae9e77b3c18ce8b3cfdcda07d0f1 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Wed, 26 Jun 2024 17:09:49 +0200
Subject: [PATCH 3/4] fix build

---
 src/components/PositionsList/PositionsList.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/PositionsList/PositionsList.tsx b/src/components/PositionsList/PositionsList.tsx
index 86cfe410..80fd5206 100644
--- a/src/components/PositionsList/PositionsList.tsx
+++ b/src/components/PositionsList/PositionsList.tsx
@@ -1,7 +1,7 @@
 import { EmptyPlaceholder } from '@components/EmptyPlaceholder/EmptyPlaceholder'
 import { INoConnected, NoConnected } from '@components/NoConnected/NoConnected'
 import { PaginationList } from '@components/PaginationList/PaginationList'
-import { Button, Grid, InputAdornment, InputBase, Typography, useMediaQuery } from '@mui/material'
+import { Button, Grid, InputAdornment, InputBase, Typography } from '@mui/material'
 import loader from '@static/gif/loader.gif'
 import SearchIcon from '@static/svg/lupaDark.svg'
 import refreshIcon from '@static/svg/refresh.svg'
@@ -9,7 +9,6 @@ import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { IPositionItem, PositionItem } from './PositionItem/PositionItem'
 import { useStyles } from './style'
-import { theme } from '@static/theme'
 
 interface IProps {
   initialPage: number
@@ -43,8 +42,6 @@ export const PositionsList: React.FC<IProps> = ({
   const [defaultPage] = useState(initialPage)
   const [page, setPage] = useState(initialPage)
 
-  const isXsDown = useMediaQuery(theme.breakpoints.down('sm'))
-
   const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     searchSetValue(e.target.value.toLowerCase())
   }

From 1de162f7dc63d4fcf39a8ccea292c1d8f3e3fd79 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Wed, 26 Jun 2024 17:21:00 +0200
Subject: [PATCH 4/4] change inputs type

---
 src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx | 2 +-
 .../Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx          | 2 +-
 src/components/Inputs/RangeInput/RangeInput.tsx                 | 1 +
 src/components/Inputs/SimpleInput/SimpleInput.tsx               | 2 +-
 src/components/PositionsList/PositionsList.tsx                  | 1 -
 src/components/Snackbar/LoadingSnackbar/style.ts                | 2 +-
 6 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx
index 6a892ff2..0741919e 100644
--- a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx
+++ b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx
@@ -116,7 +116,7 @@ export const DepositAmountInput: React.FC<IProps> = ({
             className={classes.input}
             classes={{ input: classes.innerInput }}
             inputRef={inputRef}
-            type={'text'}
+            type='number'
             value={value}
             disableUnderline={true}
             placeholder={placeholder}
diff --git a/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx b/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx
index aa459d8d..bebbbf85 100644
--- a/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx
+++ b/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx
@@ -125,7 +125,7 @@ export const AmountInput: React.FC<IProps> = ({
           className={classNames(classes.amountInput, className)}
           classes={{ input: classes.input }}
           style={style}
-          type={'text'}
+          type='number'
           value={value}
           disableUnderline={true}
           placeholder={placeholder}
diff --git a/src/components/Inputs/RangeInput/RangeInput.tsx b/src/components/Inputs/RangeInput/RangeInput.tsx
index 2f36e9fc..6702efd3 100644
--- a/src/components/Inputs/RangeInput/RangeInput.tsx
+++ b/src/components/Inputs/RangeInput/RangeInput.tsx
@@ -137,6 +137,7 @@ export const RangeInput: React.FC<IRangeInput> = ({
           onBlur={onBlur}
           disableUnderline={true}
           disabled={disabled}
+          type='number'
         />
         {disabled ? null : (
           <Button className={classes.button} onClick={increaseValue} disableRipple>
diff --git a/src/components/Inputs/SimpleInput/SimpleInput.tsx b/src/components/Inputs/SimpleInput/SimpleInput.tsx
index ec7ad64f..19c5ff72 100644
--- a/src/components/Inputs/SimpleInput/SimpleInput.tsx
+++ b/src/components/Inputs/SimpleInput/SimpleInput.tsx
@@ -72,7 +72,7 @@ export const SimpleInput: React.FC<IProps> = ({
       className={classNames(classes.amountInput, className)}
       classes={{ input: classes.input }}
       style={style}
-      type={'text'}
+      type='number'
       value={value}
       disableUnderline={true}
       placeholder={placeholder}
diff --git a/src/components/PositionsList/PositionsList.tsx b/src/components/PositionsList/PositionsList.tsx
index 80fd5206..3ef62e2b 100644
--- a/src/components/PositionsList/PositionsList.tsx
+++ b/src/components/PositionsList/PositionsList.tsx
@@ -102,7 +102,6 @@ export const PositionsList: React.FC<IProps> = ({
               }
               onChange={handleChangeInput}
               value={searchValue}
-              inputMode='decimal'
             />
             <Grid rowGap={1} justifyContent='space-between'>
               <Button
diff --git a/src/components/Snackbar/LoadingSnackbar/style.ts b/src/components/Snackbar/LoadingSnackbar/style.ts
index 88b754c2..fa14dc41 100644
--- a/src/components/Snackbar/LoadingSnackbar/style.ts
+++ b/src/components/Snackbar/LoadingSnackbar/style.ts
@@ -26,7 +26,7 @@ export const StyledSnackbarContent = styled(SnackbarContent)(({ theme }) => ({
   },
 
   [theme.breakpoints.down('sm')]: {
-    maxWidth: 'none',
+    maxWidth: 'calc(100vw - 64px)',
     width: 'auto'
   }
 }))