Fix: responsiveness

src/components/Header.tsx

@@ -17,13 +17,39 @@ import { Context } from '../data/Context';
  */
 export default function Header() {
   const { title, containerMaxWidth } = useContext(Context);
+
+  const logoContainerStyle = {
+    textDecoration: 'none',
+    color: 'inherit',
+    margin: '0 0 0 0',
+    width: 'fit-content',
+    padding: '0 0 0 0 !important',
+  };
+
   return (
     <AppBar position='sticky'>
       <Container maxWidth={containerMaxWidth} className='header-container'>
         <Toolbar className='header-container'>
-          <Link to='/' style={{ textDecoration: 'none', color: 'inherit' }}>
-            <img src='/badge-white.png' className='header-icon'></img>
-          </Link>
+          <Container
+            sx={{
+              ...logoContainerStyle,
+              display: { xs: 'none', md: 'block' },
+            }}
+          >
+            <Link to='/'>
+              <img src='/badge-white.png' className='header-icon'></img>
+            </Link>
+          </Container>
+          <Container
+            sx={{
+              ...logoContainerStyle,
+              display: { xs: 'block', md: 'none' },
+            }}
+          >
+            <Link to='/'>
+              <img src='/logo192.png' className='header-icon'></img>
+            </Link>
+          </Container>
           <Typography variant='h6'>{title}</Typography>
           {title === '' && <Skeleton height={20} width={200}></Skeleton>}
         </Toolbar>

src/pages/SpeedFlowchartPage.tsx

@@ -11,6 +11,7 @@ import {
   Card,
   CardContent,
   Chip,
+  Container,
   Grid,
   Skeleton,
   Typography,
@@ -84,7 +85,9 @@ export default function SpeedFlowchartPage() {
         container
         spacing={2}
         direction={{ xs: 'column-reverse', md: 'row' }}
-        className='speed-flowchart-container'
+        sx={{
+          height: { md: 'calc(100vh - 64px - 16px - 16px)' },
+        }}
       >
         {flowchartResult?.rounds.map((round, roundKey) => (
           <Grid
@@ -110,11 +113,11 @@ export default function SpeedFlowchartPage() {
               direction={'column'}
             >
               {round.pairs.length === 2 && (
-                <div
-                  style={{
+                <Container
+                  sx={{
                     position: 'absolute',
                     width: '100%',
-                    display: 'flex',
+                    display: { xs: 'none', md: 'flex' },
                     justifyContent: 'center',
                   }}
                 >
@@ -123,14 +126,10 @@ export default function SpeedFlowchartPage() {
                     logoImage={'/logo192.png'}
                     logoWidth={100}
                     logoHeight={100}
-                    bgColor={theme.palette.background.default}
-                    fgColor={theme.palette.text.secondary}
                     size={250}
                     ecLevel={'H'}
-                    eyeRadius={5}
-                    qrStyle={'dots'}
                   />
-                </div>
+                </Container>
               )}
               {round.pairs.map((pair, pairKey) => (
                 <Grid key={`flowchart-column-${roundKey}-pair-${pairKey}`} item>