Order Sets - Grid layout

This commit is contained in:
Johnny Gear 2026-03-08 18:47:28 -05:00
parent bcee02a222
commit 30b92ba9d4

View file

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