Wrap totals in collapsible

src/app/components/Summary/Summary.tsx

@@ -15,8 +15,12 @@ import {
   useTheme,
   Stack,
   styled,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
 } from "@mui/material";
 import { useContext } from "react";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 const StackItem = styled(Stack)(({ theme }) => ({
   ...theme.typography.body2,
@@ -75,7 +79,11 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
 
   return (
     <StackItem width="100%">
+      <Accordion style={{ width: "100%" }}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
           <h2>Totals</h2>
+        </AccordionSummary>
+        <AccordionDetails>
           <TableContainer component={Paper}>
             <Table size="small" aria-label="a dense table">
               <TableHead>
@@ -89,7 +97,9 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
                   </TableCell>
                   <TableCell width="10%">
                     <Tooltip title="How many units per hour factories are producing">
-                  <Typography fontSize={theme.custom.smallText}>u/h</Typography>
+                      <Typography fontSize={theme.custom.smallText}>
+                        u/h
+                      </Typography>
                     </Tooltip>
                   </TableCell>
                   <TableCell width="10%" align="right">
@@ -120,6 +130,8 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
               </TableBody>
             </Table>
           </TableContainer>
+        </AccordionDetails>
+      </Accordion>
     </StackItem>
   );
 };