feat: wrapping controls

This commit is contained in:
TrèsAbhi committed 2024-04-10 16:57:38 -05:00
1 parent d6e96e17ad
commit 690bc5dbb5
1 file changed
+23 -23
+23 -23
View File
@@ -529,9 +529,9 @@ export default function Page() {
return ( return (
<PageWrapper color="crimson" size="100%"> <PageWrapper color="crimson" size="100%">
<Flex justify="center" gap="2" align="center" mt="4" direction="column"> <Flex justify="center" gap="4" align="center" mt="4" direction="column">
{(haveReactive || haveDynamicArmor || haveSpallLiner) && ( {(haveReactive || haveDynamicArmor || haveSpallLiner) && (
<Callout.Root mb="4"> <Callout.Root>
<Callout.Icon> <Callout.Icon>
<InfoCircledIcon /> <InfoCircledIcon />
</Callout.Icon> </Callout.Icon>
@@ -542,13 +542,13 @@ export default function Page() {
</Callout.Root> </Callout.Root>
)} )}
<Flex gap="2"> <Flex gap="2" wrap="wrap" justify="center">
<Dialog.Root <Dialog.Root
open={addTankDialogOpen} open={addTankDialogOpen}
onOpenChange={setAddTankDialogOpen} onOpenChange={setAddTankDialogOpen}
> >
<Dialog.Trigger> <Dialog.Trigger>
<Button> <Button variant="soft">
<PlusIcon /> Add <PlusIcon /> Add
</Button> </Button>
</Dialog.Trigger> </Dialog.Trigger>
@@ -607,26 +607,26 @@ export default function Page() {
> >
<TrashIcon /> Clear <TrashIcon /> Clear
</Button> </Button>
</Flex>
<SegmentedControl.Root <SegmentedControl.Root
value={deltaMode} value={deltaMode}
onValueChange={(value) => { onValueChange={(value) => {
mutateComparePersistent((draft) => { mutateComparePersistent((draft) => {
draft.deltaMode = value as DeltaMode; draft.deltaMode = value as DeltaMode;
}); });
}} }}
> >
<SegmentedControl.Item value={'none' satisfies DeltaMode}> <SegmentedControl.Item value={'none' satisfies DeltaMode}>
No deltas No deltas
</SegmentedControl.Item> </SegmentedControl.Item>
<SegmentedControl.Item value={'percentage' satisfies DeltaMode}> <SegmentedControl.Item value={'percentage' satisfies DeltaMode}>
Percentage Percentage
</SegmentedControl.Item> </SegmentedControl.Item>
<SegmentedControl.Item value={'absolute' satisfies DeltaMode}> <SegmentedControl.Item value={'absolute' satisfies DeltaMode}>
Absolute Absolute
</SegmentedControl.Item> </SegmentedControl.Item>
</SegmentedControl.Root> </SegmentedControl.Root>
</Flex>
</Flex> </Flex>
{members.length > 0 && ( {members.length > 0 && (