Order Sets - Grid layout

web/vite/src/OrderSets.tsx

@@ -8,6 +8,7 @@ import {
   Box,
   RingProgress,
   Alert,
+  Grid,
 } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 import { TimeValue } from "@mantine/dates";
@@ -119,7 +120,7 @@ export const OrderSets: React.FC<OrderSetProps> = ({
           }
         }}
       >
-        <Flex gap="md" wrap="wrap">
+        <Grid gutter="md">
           {orderSets
             ? orderSets.map(
                 ({
@@ -133,6 +134,7 @@ export const OrderSets: React.FC<OrderSetProps> = ({
                   probability,
                   punishment_pool_name,
                 }) => (
+                  <Grid.Col span={{ base: 12, sm: 6 }}>
                     <Card
                       key={id}
                       shadow="sm"
@@ -140,7 +142,6 @@ export const OrderSets: React.FC<OrderSetProps> = ({
                       radius="md"
                       withBorder
                       bg="gray.2"
-                    w="400px"
                       mb="0"
                     >
                       <Flex direction="column" gap="md" h="100%">
@@ -218,10 +219,11 @@ export const OrderSets: React.FC<OrderSetProps> = ({
                         </Flex>
                       </Flex>
                     </Card>
+                  </Grid.Col>
                 ),
               )
             : null}
-        </Flex>
+        </Grid>
       </div>
       <Box my="lg">
         <NavigateButton to={`/orders/${username}/new`}>