Merge pull request #442 from Raziievskyi-Illia/fix/button_stickiness

Author: KevinMehrabi

src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx

@@ -63,7 +63,7 @@ const BorrowMarketTokenTable = (props) => {
                         </TableCell>
                         <TableCell align="center"> Available </TableCell>
                         <TableCell align="center"> Borrow APY </TableCell>
-                        <TableCell align="center" className={classes.stickyCellRight}> </TableCell>
+                        <TableCell align="center" className={`${classes.stickyCellRight} ${classes.borrowCellHeader}`}> </TableCell>
                         <TableCell align="center" className={classes.fifthCell}> </TableCell>
                     </TableRow>
                 </TableHead>

src/ui/src/components/Dashboard/BorrowedTokenTable.tsx

@@ -74,7 +74,7 @@ const BorrowedTokenTable = (props) => {
                         <TableCell> Token </TableCell>
                         <TableCell align="center"> APY </TableCell>
                         <TableCell align="center"> Balance </TableCell>
-                        <TableCell align="center"> </TableCell>
+                        <TableCell align="center" className={classes.stickyCellRight}> </TableCell>
                     </TableRow>
                 </TableHead>
                 <TableBody>
@@ -179,7 +179,7 @@ const BorrowedTokenTable = (props) => {
                                         )}
                                     </span>
                                 </TableCell>
-                                <TableCell align="center" className={classes.repayCell}>
+                                <TableCell align="center" className={`${classes.repayCell} ${classes.stickyCellRight}`}>
                                     <Button variant='contained' className={classes.detailsButton} onClick={() => handleClickRepay(data)}>
                                         R<Typography textTransform={'lowercase'}>epay</Typography>
                                     </Button>

src/ui/src/components/Dashboard/SuppliedTokenTable.tsx

@@ -101,7 +101,7 @@ const SuppliedTokenTable = (props) => {
                             Collateral{' '}
                             <img src={questionCircleIcon} alt={'questionIcon'} className={classes.questionCircleIcon} />
                         </TableCell>
-                        <TableCell align='center'></TableCell>
+                        <TableCell className={classes.stickyCellRight} align='center'></TableCell>
                     </TableRow>
                 </TableHead>
                 <TableBody>
@@ -212,7 +212,7 @@ const SuppliedTokenTable = (props) => {
                                 <TableCell align="center" className={classes.switchPadding}>
                                     <Switch data={data} />
                                 </TableCell>
-                                <TableCell className={classes.withdrawCell}>
+                                <TableCell className={`${classes.withdrawCell} ${classes.stickyCellRight}`}>
                                     <Button variant='contained' className={classes.detailsButton} onClick={() => handleClickWithdraw(data)}>
                                         W<Typography textTransform={'lowercase'}>ithdraw</Typography>
                                     </Button>

src/ui/src/components/Dashboard/style.ts

@@ -263,11 +263,47 @@ export const useStyles = makeStyles({
             paddingRight: '1.5rem !important',
         },
         paddingLeft: '0 !important',
+        '@media(min-width: 423px) and (max-width: 499px)': {
+            position: 'sticky',
+            zIndex: 2,
+            right: 0,
+            opacity: '1 !important',
+            backgroundColor: 'white',
+            boxShadow: 'inset 0 -1px 0 #E0E0E0',
+            borderBottom: '0 !important',
+        },
+        '@media(min-width: 626px) and (max-width: 720px)': {
+            position: 'sticky',
+            zIndex: 2,
+            right: 0,
+            opacity: '1 !important',
+            backgroundColor: 'white',
+            boxShadow: 'inset 0 -1px 0 #E0E0E0',
+            borderBottom: '0 !important',
+        },
+        '@media(min-width: 1423px) and (max-width: 1615px)': {
+            position: 'sticky',
+            zIndex: 2,
+            right: 0,
+            opacity: '1 !important',
+            backgroundColor: 'white',
+            boxShadow: 'inset 0 -1px 0 #E0E0E0',
+            borderBottom: '0 !important',
+        }
     },
     borrowCell: {
         '@media(min-width: 1200px)': {
             paddingRight: '1.5rem !important',
         },
+        '@media(min-width: 423px) and (max-width: 499px)': {
+            right: '21% !important',
+        },
+        '@media(min-width: 626px) and (max-width: 720px)': {
+            right: '19% !important',
+        },
+        '@media(min-width: 1423px) and (max-width: 1615px)': { 
+            right: '17% !important',
+        }
     },
     supplyButton: {
         borderRadius: '8px',
@@ -349,5 +385,16 @@ export const useStyles = makeStyles({
         '@media(min-width: 1200px)': {
             paddingRight: '1.5rem !important',
         },
+    },
+    borrowCellHeader: {
+        '@media(min-width: 423px) and (max-width: 499px)': {
+            right: '21% !important',
+        },
+        '@media(min-width: 626px) and (max-width: 720px)': {
+            right: '19% !important',
+        },
+        '@media(min-width: 1423px) and (max-width: 1615px)': { 
+            right: '17% !important',
+        }
     }
 });