Fix: show final and small final in one column

src/pages/SpeedFlowchartPage.tsx

@@ -4,9 +4,14 @@ import { useParams } from 'react-router-dom';
 import {
   convertResultsToSpeedFlowchartResult,
   SpeedFlowchartResult,
+  SpeedRoundPair,
 } from '../data/SpeedFlowchart';
 import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';
 
+interface SpeedRoundPairDummy extends SpeedRoundPair {
+  dummy: boolean;
+}
+
 /**
  *
  * @return {JSX.Element} speed flowchart page
@@ -37,7 +42,17 @@ export default function SpeedFlowchartPage() {
       console.log('loading false');
 
       const flowchartResult = convertResultsToSpeedFlowchartResult(r);
-      console.log(flowchartResult);
+      const l = flowchartResult.rounds.length;
+      const dummy: SpeedRoundPairDummy = { dummy: true };
+      flowchartResult.rounds[l - 2].pairs = [
+        dummy,
+        ...flowchartResult.rounds[l - 1].pairs,
+        ...flowchartResult.rounds[l - 2].pairs,
+      ];
+      flowchartResult.rounds[l - 2].roundName = `${
+        flowchartResult.rounds[l - 1].roundName
+      } / ${flowchartResult.rounds[l - 2].roundName}`;
+      flowchartResult.rounds.pop();
       setFlowchartResult(flowchartResult);
     });
   }, []);
@@ -56,7 +71,7 @@ export default function SpeedFlowchartPage() {
             xs={12}
             md={12 / flowchartResult.rounds.length}
           >
-            <Grid item xs={12}>
+            <Grid item className='center-children' xs={12}>
               <Typography variant='h6' fontWeight={'bold'} gutterBottom>
                 {round.roundName}
               </Typography>
@@ -70,7 +85,11 @@ export default function SpeedFlowchartPage() {
             >
               {round.pairs.map((pair, pairKey) => (
                 <Grid key={`flowchart-column-${roundKey}-pair-${pairKey}`} item>
-                  <Card>
+                  <Card
+                    sx={{
+                      opacity: (pair as SpeedRoundPairDummy).dummy ? 0 : 1,
+                    }}
+                  >
                     <CardContent>
                       <Typography
                         sx={{