From 62f20a905e936f7736fc32c59dda7d5ff300083f Mon Sep 17 00:00:00 2001
From: Aid Thompson <adrian@nymtech.net>
Date: Wed, 24 Nov 2021 10:45:54 +0000
Subject: [PATCH] Alignment on Overview page

---
 explorer/src/components/StatsCard.tsx | 109 +++++++++++++++++---------
 1 file changed, 70 insertions(+), 39 deletions(-)

diff --git a/explorer/src/components/StatsCard.tsx b/explorer/src/components/StatsCard.tsx
index 44d15887a4..2e26c9ad26 100644
--- a/explorer/src/components/StatsCard.tsx
+++ b/explorer/src/components/StatsCard.tsx
@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { Box, Card, CardContent, IconButton, Typography } from '@mui/material';
+import {
+  Box,
+  Card,
+  CardContent,
+  IconButton,
+  Typography,
+  useMediaQuery,
+} from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
 
 interface StatsCardProps {
@@ -15,46 +23,69 @@ export const StatsCard: React.FC<StatsCardProps> = ({
   count,
   onClick,
   errorMsg,
-}) => (
-  <Card onClick={onClick} sx={{ height: '100%' }}>
-    <CardContent
-      sx={{
-        padding: 2,
-        '&:last-child': {
-          paddingBottom: 2,
-        },
-        cursor: 'pointer',
-      }}
-    >
-      <Box
-        display="flex"
-        alignItems="center"
-        sx={{ color: (theme) => theme.palette.text.primary, fontSize: 18 }}
+}) => {
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.down('sm'));
+  return (
+    <Card onClick={onClick} sx={{ height: '100%' }}>
+      <CardContent
+        sx={{
+          padding: 2,
+          '&:last-child': {
+            paddingBottom: 2,
+          },
+          cursor: 'pointer',
+        }}
       >
-        {icon}
-        <Typography
-          ml={3}
-          mr={0.75}
-          fontSize="inherit"
-          data-testid={`${title}-amount`}
+        <Box
+          display="flex"
+          alignItems="center"
+          sx={{
+            color: theme.palette.text.primary,
+            fontSize: 18,
+            justifyContent: matches ? 'space-between' : 'flex-start',
+            maxWidth: matches ? 230 : null,
+          }}
         >
-          {count}
-        </Typography>
-        <Typography mr={1} fontSize="inherit" data-testid={title}>
-          {title}
-        </Typography>
-        <IconButton color="inherit">
-          <ArrowRightAltIcon />
-        </IconButton>
-      </Box>
-      {errorMsg && (
-        <Typography variant="body2" sx={{ color: 'danger', padding: 2 }}>
-          {errorMsg}
-        </Typography>
-      )}
-    </CardContent>
-  </Card>
-);
+          {icon}
+
+          <Box
+            sx={{
+              color: theme.palette.text.primary,
+              display: 'flex',
+              flexDirection: 'row',
+              fontSize: 18,
+              justifyContent: matches ? 'space-between' : 'flex-start',
+              alignItems: 'center',
+              width: '100%',
+              maxWidth: matches ? 230 : null,
+            }}
+          >
+            <Typography
+              ml={3}
+              mr={0.75}
+              fontSize="inherit"
+              data-testid={`${title}-amount`}
+            >
+              {count}
+            </Typography>
+            <Typography mr={1} fontSize="inherit" data-testid={title}>
+              {title}
+            </Typography>
+            <IconButton color="inherit">
+              <ArrowRightAltIcon />
+            </IconButton>
+          </Box>
+        </Box>
+        {errorMsg && (
+          <Typography variant="body2" sx={{ color: 'danger', padding: 2 }}>
+            {errorMsg}
+          </Typography>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
 
 StatsCard.defaultProps = {
   onClick: undefined,