Fix: don't show dummy on mobile

src/pages/SpeedFlowchartPage.tsx

@@ -7,6 +7,7 @@ import {
   SpeedRoundPair,
 } from '../data/SpeedFlowchart';
 import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';
+import { theme } from '../utils/Theme';
 
 interface SpeedRoundPairDummy extends SpeedRoundPair {
   dummy: boolean;
@@ -88,6 +89,13 @@ export default function SpeedFlowchartPage() {
                   <Card
                     sx={{
                       opacity: (pair as SpeedRoundPairDummy).dummy ? 0 : 1,
+                      [theme.breakpoints.down('md')]: (
+                        pair as SpeedRoundPairDummy
+                      ).dummy
+                        ? {
+                            display: 'none',
+                          }
+                        : undefined,
                     }}
                   >
                     <CardContent>

src/utils/Theme.tsx

@@ -1,6 +1,19 @@
 import { CssBaseline } from '@mui/material';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
+export const theme = createTheme({
+  components: {
+    MuiToggleButton: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+  },
+  palette: {
+    mode: 'dark',
+  },
+});
+
 /**
  * Sets a MaterialUi theme for its children
  * @param  {any} props accepts JSX elements to wrap theme in
@@ -8,21 +21,8 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
  */
 export default function Theme(props: { children: JSX.Element }) {
   const { children } = props;
-
-  const Theme = createTheme({
-    components: {
-      MuiToggleButton: {
-        defaultProps: {
-          disableRipple: true,
-        },
-      },
-    },
-    palette: {
-      mode: 'dark',
-    },
-  });
   return (
-    <ThemeProvider theme={Theme}>
+    <ThemeProvider theme={theme}>
       <CssBaseline />
       {children}
     </ThemeProvider>