Feat: responsive layout

2022-07-29 00:04:46 +02:00 · 2022-07-29 00:04:46 +02:00 · b831ab4079
commit b831ab4079
parent b690ace6b5
1 changed files with 11 additions and 2 deletions
--- a/src/pages/SpeedFlowchartPage.tsx
+++ b/src/pages/SpeedFlowchartPage.tsx
@ -43,9 +43,18 @@ export default function SpeedFlowchartPage() {

  return (
    <>
-      <Grid container spacing={2}>
+      <Grid
+        container
+        spacing={2}
+        direction={{ xs: 'column-reverse', md: 'row' }}
+      >
        {flowchartResult?.rounds.map((round, roundKey) => (
-          <Grid key={`flowchart-column-${roundKey}`} item xs={12 / 5}>
+          <Grid
+            key={`flowchart-column-${roundKey}`}
+            item
+            xs={12}
+            md={12 / flowchartResult.rounds.length}
+          >
            <h3>{round.roundName}</h3>
            <Grid container spacing={2}>
              {round.pairs.map((pair, pairKey) => (