From 42be40c8dc4b074c3c4404ca7808c54214a490cd Mon Sep 17 00:00:00 2001
From: "ilya.razievskij" <ilya.razievskij@gmail.com>
Date: Tue, 4 Feb 2025 20:47:36 +0200
Subject: [PATCH] fix: spacing, attachment

---
 .../Dashboard/BorrowMarketTokenTable.tsx      |  8 +++---
 .../Dashboard/SupplyMarketTokenTable.tsx      |  4 +--
 src/ui/src/components/Dashboard/style.ts      | 26 ++++++++++++-------
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
index 9015904b..3d56ca02 100644
--- a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
@@ -54,9 +54,7 @@ const BorrowMarketTokenTable = (props) => {
             <Table>
                 <TableHead>
                     <TableRow>
-                        <TableCell className={classes.stickyCellLeft}>
-                            Token
-                        </TableCell>
+                        <TableCell>Token</TableCell>
                         <TableCell align="center"> Available </TableCell>
                         <TableCell align="center"> Borrow APY </TableCell>
                         <TableCell align="center" className={classes.stickyCellRight}> </TableCell>
@@ -68,7 +66,7 @@ const BorrowMarketTokenTable = (props) => {
                         <React.Fragment key={data.title}>
                             {(address && data.walletBalance) || (!address && data.marketSize) ? (
                                 <TableRow key={data.title}>
-                                    <TableCell className={`${classes.firstCell} ${classes.stickyCellLeft}`}>
+                                    <TableCell className={classes.firstCell}>
                                         <div className={classes.token}>
                                             <img
                                                 src={data.logo}
@@ -132,7 +130,7 @@ const BorrowMarketTokenTable = (props) => {
                                             %
                                         </span>
                                     </TableCell>
-                                    <TableCell className={classes.stickyCellRight}>
+                                    <TableCell className={`${classes.stickyCellRight} ${classes.borrowCell}`}>
                                         <Button
                                             variant="contained"
                                             size="medium"
diff --git a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
index 129e9b9c..4dd88c85 100644
--- a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
@@ -51,7 +51,7 @@ const SupplyMarketTokenTable = (props) => {
                         </TableCell>
                         <TableCell align="center"> Wallet </TableCell>
                         <TableCell align="center"> Supply APY </TableCell>
-                        <TableCell className={classes.stickyCellRight} align="center"> </TableCell>
+                        <TableCell align="center"> </TableCell>
                     </TableRow>
                 </TableHead>
                 <TableBody>
@@ -120,7 +120,7 @@ const SupplyMarketTokenTable = (props) => {
                                             %
                                         </span>
                                     </TableCell>
-                                    <TableCell align="center" className={`${classes.fourthCell} ${classes.stickyCellRight}`}>
+                                    <TableCell align="center" className={classes.fourthCell}>
                                         <span>
                                             <Button
                                                 variant="contained"
diff --git a/src/ui/src/components/Dashboard/style.ts b/src/ui/src/components/Dashboard/style.ts
index 045d1b77..43cd9138 100644
--- a/src/ui/src/components/Dashboard/style.ts
+++ b/src/ui/src/components/Dashboard/style.ts
@@ -153,7 +153,6 @@ export const useStyles = makeStyles({
         borderRadius: '8px',
         '@media(max-width: 768px)': {},
         '@media(max-width: 501px)': {},
-        width: '80%'
     },
     detailsButton: {
         color: '#2C2C2C',
@@ -164,7 +163,6 @@ export const useStyles = makeStyles({
             backgroundColor: 'lightgrey',
             boxShadow: 'none',
         },
-        width: '80%'
     },
     tokenName: {
         display: 'inline',
@@ -248,21 +246,31 @@ export const useStyles = makeStyles({
     thirdCell: {},
     fourthCell: {
         width: '30%',
+        '@media(min-width: 1200px)': {
+            paddingRight: '1.5rem !important',
+        }
     },
     fifthCell: {
         width: '15%',
-        right: '10px',
         '@media(max-width: 1300px)': {
             opacity: '1 !important',
+            backgroundColor: 'white'
+        },
+        '@media(min-width: 1200px)': {
+            paddingRight: '1.5rem !important',
+        },
+        paddingLeft: '0 !important',
+    },
+    borrowCell: {
+        '@media(min-width: 1200px)': {
+            paddingRight: '1.5rem !important',
         },
-        paddingLeft: '1px !important',
-        backgroundColor: '#ECF4FF'
     },
     supplyButton: {
         borderRadius: '8px',
-        marginRight: '25%',
+        marginRight: '0%',
         marginLeft: '0%',
-        width: '80%',
+        width: '100%',
     },
     tableTitle2: {
         color: '#000',
@@ -316,8 +324,8 @@ export const useStyles = makeStyles({
             zIndex: 2,
             left: 0,
             opacity: '1 !important',
+            backgroundColor: 'white',
         },
-        backgroundColor: '#ECF4FF'
     },
     stickyCellRight: {
         '@media(max-width: 1300px)': {
@@ -325,7 +333,7 @@ export const useStyles = makeStyles({
             zIndex: 2,
             right: 0,
             opacity: '1 !important',
+            backgroundColor: 'white',
         },
-        backgroundColor: '#ECF4FF'
     },
 });