diff --git a/bridge_ui/src/components/Stats/TransactionMetrics.tsx b/bridge_ui/src/components/Stats/TransactionMetrics.tsx index 4fb2aa4a1..d347da99f 100644 --- a/bridge_ui/src/components/Stats/TransactionMetrics.tsx +++ b/bridge_ui/src/components/Stats/TransactionMetrics.tsx @@ -46,6 +46,7 @@ const useStyles = makeStyles((theme) => ({ }, totalsBox: { display: "flex", + flexWrap: "wrap", width: "100%", justifyContent: "space-evenly", alignItems: "center", @@ -53,6 +54,8 @@ const useStyles = makeStyles((theme) => ({ totalContainer: { display: "flex", alignItems: "flex-end", + paddingLeft: theme.spacing(0.5), + paddingRight: theme.spacing(0.5), paddingBottom: 1, // line up with left text bottom [theme.breakpoints.down("sm")]: { marginTop: theme.spacing(1), diff --git a/bridge_ui/src/components/Stats/index.tsx b/bridge_ui/src/components/Stats/index.tsx index ba535020c..44ed204fb 100644 --- a/bridge_ui/src/components/Stats/index.tsx +++ b/bridge_ui/src/components/Stats/index.tsx @@ -196,7 +196,9 @@ const StatsRoot: React.FC = () => { tvl.data.forEach((val) => { if (val.totalValue) sum += val.totalValue; }); - return numeral(sum).format("0 a").toUpperCase(); + return numeral(sum) + .format(sum >= 1000000000 ? "0.000 a" : "0 a") + .toUpperCase(); } }, [tvl.data]); @@ -250,15 +252,15 @@ const StatsRoot: React.FC = () => { )} - - - + + + ); };