fix: tables on mobile

- proper scaling of tables on mobile
defilytica · Aug 13, 2024 · 368e980 · 368e980
1 parent 202470e
commit 368e980
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 12 deletions.
diff --git a/src/components/Tables/AuraPoolLeaderboardTable/index.tsx b/src/components/Tables/AuraPoolLeaderboardTable/index.tsx
@@ -293,7 +293,7 @@ export default function AuraPoolLeaderboardTable({ leaderboardInfo }:
                                                 {row.id}
                                             </StyledTableCell>
                                             <StyledTableCell
-                                                sx={{ display: { xs: 'none', md: 'table-cell' } }}
+                                                sx={{ display: { xs: 'table-cell', md: 'table-cell' } }}
                                             >
                                                 <Box display="flex" alignItems="center" alignContent="center">
                                                     <Box mr={1}>
@@ -313,13 +313,13 @@ export default function AuraPoolLeaderboardTable({ leaderboardInfo }:
                                             </StyledTableCell>
                                             <StyledTableCell
                                                 align="right"
-                                                sx={{ display: { xs: 'none', md: 'table-cell' } }}
+                                                sx={{ display: { xs: 'table-cell', md: 'table-cell' } }}
                                             >
                                                 {formatAmount(row.amount, 2) + ' auraBAL'}
                                             </StyledTableCell>
                                             <StyledTableCell
                                                 align="right"
-                                                sx={{ display: { xs: 'none', md: 'table-cell' } }}
+                                                sx={{ display: { xs: 'table-cell', md: 'table-cell' } }}
                                             >
                                                 {formatAmount(row.fraction, 2) + ' %'}
                                             </StyledTableCell>

diff --git a/src/components/Tables/LockerTable/index.tsx b/src/components/Tables/LockerTable/index.tsx
@@ -110,21 +110,21 @@ const headCells: readonly HeadCell[] = [
         numeric: false,
         disablePadding: false,
         label: 'Value ($)',
-        isMobileVisible: false,
+        isMobileVisible: true,
     },
     {
         id: 'poolShare',
         numeric: false,
         disablePadding: false,
         label: 'Relative Share (%)',
-        isMobileVisible: false,
+        isMobileVisible: true,
     },
     {
         id: 'nrOfLocks',
         numeric: false,
         disablePadding: false,
         label: '# Locks',
-        isMobileVisible: false
+        isMobileVisible: true
     }
 ];
 
@@ -314,7 +314,7 @@ export default function LockerTable({
                                                 {row.id}
                                             </StyledTableCell>
                                             <StyledTableCell
-                                                sx={{display: {xs: 'none', md: 'table-cell'}}}
+                                                sx={{display: {xs: 'table-cell', md: 'table-cell'}}}
                                             >
                                                 <Box display="flex" alignItems="center" alignContent="center">
                                                     <Box mr={1}>
@@ -336,7 +336,7 @@ export default function LockerTable({
                                                 component="th"
                                                 id={labelId}
                                                 scope="row"
-                                                sx={{display: {xs: 'none', md: 'table-cell'}}}
+                                                sx={{display: {xs: 'table-cell', md: 'table-cell'}}}
                                             >
                                                 <Box display="flex" alignItems="center">
                                                     <Box mr={1}>
@@ -349,7 +349,7 @@ export default function LockerTable({
                                                 component="th"
                                                 id={labelId}
                                                 scope="row"
-                                                sx={{display: {xs: 'none', md: 'table-cell'}}}>
+                                                sx={{display: {xs: 'table-cell', md: 'table-cell'}}}>
                                                 <Box display="flex" alignItems="center">
                                                     <Box mr={1}>
                                                         {formatDollarAmount(row.lockedUSD)}
@@ -360,7 +360,7 @@ export default function LockerTable({
                                                 component="th"
                                                 id={labelId}
                                                 scope="row"
-                                                sx={{display: {xs: 'none', md: 'table-cell'}}}>
+                                                sx={{display: {xs: 'table-cell', md: 'table-cell'}}}>
                                                 <Box display="flex" alignItems="center">
                                                     <Box mr={1}>
                                                         {row.poolShare.toFixed(2)}%
@@ -371,7 +371,7 @@ export default function LockerTable({
                                                 component="th"
                                                 id={labelId}
                                                 scope="row"
-                                                sx={{display: {xs: 'none', md: 'table-cell'}}}>
+                                                sx={{display: {xs: 'table-cell', md: 'table-cell'}}}>
                                                 <Box display="flex" alignItems="center">
                                                     <Box mr={1}>
                                                         {row.nrOfLocks}

diff --git a/src/pages/AuraBAL/index.tsx b/src/pages/AuraBAL/index.tsx
@@ -34,6 +34,7 @@ import AuraBALMultiAreaChart from "../../components/Echarts/auraBAL/AuraBALMulti
 import {ArbitrumNetworkInfo, EthereumNetworkInfo, PolygonNetworkInfo} from "../../constants/networks";
 import React from "react";
 import useGetSimpleTokenPrices from "../../data/balancer-api-v3/useGetSimpleTokenPrices";
+import {isMobile} from "react-device-detect";
 
 
 export default function AuraBAL() {
@@ -402,8 +403,12 @@ export default function AuraBAL() {
                     <Box p={1} display="flex" alignItems='center'>
 
                     </Box>
+                    <Box sx={{
+                        width: isMobile ? '430px' : 'auto',
+                        maxWidth: '100%'
+                    }}>
                     <AuraPoolLeaderboardTable leaderboardInfo={activeNetwork === EthereumNetworkInfo ? auraBalPoolLeaderboard : auraBalVaultLeaderboard}/>
-
+                    </Box>
                 </Grid>
             </Grid>
             <Grid

diff --git a/src/pages/AuraLocks/index.tsx b/src/pages/AuraLocks/index.tsx
@@ -23,6 +23,7 @@ import CustomLinearProgress from "../../components/Progress/CustomLinearProgress
 import AuraDailyUnlocksChart from "../../components/Echarts/AuraDailyUnlocksChart";
 import {useAuraGlobalStats} from "../../data/aura/useAuraGlobalStats";
 import useGetSimpleTokenPrices from "../../data/balancer-api-v3/useGetSimpleTokenPrices";
+import {isMobile} from "react-device-detect";
 
 
 const auraAddress = '0xc0c293ce456ff0ed870add98a0828dd4d2903dbf';
@@ -346,6 +347,10 @@ export default function AuraLocks() {
                                     </Box>
                                 </Grid>
                             </Grid>
+                            <Box sx={{
+                                width: isMobile ? '430px' : 'auto',
+                                maxWidth: '100%'
+                            }}>
                             <LockerTable lockerAccounts={lockers}
                                          auraUSD={coinData?.data[auraAddress].price}
                                          totalAmountLocked={totalLockedAmount}
@@ -354,6 +359,7 @@ export default function AuraLocks() {
                                          rowsPerPage={rowsPerPage}
                                          setRowsPerPage={setRowsPerPage}
                                          />
+                            </Box>
                         </Grid>
                     </Grid>
                 </Box>) :