build info on bottom left of screen area

src/pages/PageContainer.tsx

@@ -1,4 +1,4 @@
-import { Container, SxProps, Theme } from "@mui/material";
+import { Container, SxProps, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import classNames from "classnames";
 // import { useMobile } from "hooks";
@@ -47,6 +47,23 @@ const useStyles = makeStyles((theme: Theme) => ({
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center"
+  },
+  buildInfo: {
+    position: "fixed" as const,
+    bottom: 56,
+    left: 8,
+    fontSize: 10,
+    lineHeight: 1.3,
+    opacity: 0.35,
+    color: theme.palette.text.secondary,
+    pointerEvents: "none" as const,
+    zIndex: 1,
+    [theme.breakpoints.up("sm")]: {
+      bottom: 8,
+    },
+    [theme.breakpoints.up("md")]: {
+      left: `calc(${theme.spacing(9)} + 8px)`,
+    }
   }
 }))
 
@@ -78,8 +95,13 @@ export const PageContainer: React.FunctionComponent<Props> = (props: Props) => {
       }}
       disableGutters
       maxWidth={false}
-      children={<>{children}</>}
-    />
+    >
+      {children}
+      <Typography component="div" className={classes.buildInfo}>
+        {new Date(__BUILD_DATE__).toLocaleDateString()}<br />
+        {__GIT_HASH__}
+      </Typography>
+    </Container>
   );
 };