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{' '}
-
+
@@ -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',
+ }
}
});