diff --git a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx index e255a065..61f52c5d 100644 --- a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx +++ b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx @@ -63,7 +63,7 @@ const BorrowMarketTokenTable = (props) => { Available Borrow APY - + diff --git a/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx index bda8076a..3bf17b91 100644 --- a/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx +++ b/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx @@ -74,7 +74,7 @@ const BorrowedTokenTable = (props) => { Token APY Balance - + @@ -179,7 +179,7 @@ const BorrowedTokenTable = (props) => { )} - + diff --git a/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx b/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx index 21c7128f..80cb8019 100644 --- a/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx +++ b/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx @@ -101,7 +101,7 @@ const SuppliedTokenTable = (props) => { Collateral{' '} {'questionIcon'} - + @@ -212,7 +212,7 @@ const SuppliedTokenTable = (props) => { - + diff --git a/src/ui/src/components/Dashboard/style.ts b/src/ui/src/components/Dashboard/style.ts index 43a490ea..7ecf00f0 100644 --- a/src/ui/src/components/Dashboard/style.ts +++ b/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', + } } });