Fix mobile export styles

This commit is contained in:
David Corbitt
2023-08-23 21:21:09 -07:00
parent 9632ccbc71
commit 815d4faad2

View File

@@ -19,6 +19,7 @@ import {
NumberIncrementStepper, NumberIncrementStepper,
NumberDecrementStepper, NumberDecrementStepper,
Collapse, Collapse,
Flex,
useDisclosure, useDisclosure,
type UseDisclosureReturn, type UseDisclosureReturn,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
@@ -124,7 +125,10 @@ const ExportLogsModal = ({ disclosure }: { disclosure: UseDisclosureReturn }) =>
your choice. your choice.
</Text> </Text>
<VStack alignItems="flex-start" spacing={4}> <VStack alignItems="flex-start" spacing={4}>
<HStack spacing={2}> <Flex
flexDir={{ base: "column", md: "row" }}
alignItems={{ base: "flex-start", md: "center" }}
>
<Text fontWeight="bold" w={48}> <Text fontWeight="bold" w={48}>
Format: Format:
</Text> </Text>
@@ -134,8 +138,11 @@ const ExportLogsModal = ({ disclosure }: { disclosure: UseDisclosureReturn }) =>
onSelect={(option) => setSelectedExportFormat(option)} onSelect={(option) => setSelectedExportFormat(option)}
inputGroupProps={{ w: 48 }} inputGroupProps={{ w: 48 }}
/> />
</HStack> </Flex>
<HStack spacing={2}> <Flex
flexDir={{ base: "column", md: "row" }}
alignItems={{ base: "flex-start", md: "center" }}
>
<Text fontWeight="bold" w={48}> <Text fontWeight="bold" w={48}>
Testing Split: Testing Split:
</Text> </Text>
@@ -154,7 +161,7 @@ const ExportLogsModal = ({ disclosure }: { disclosure: UseDisclosureReturn }) =>
</NumberInputStepper> </NumberInputStepper>
</NumberInput> </NumberInput>
</HStack> </HStack>
</HStack> </Flex>
</VStack> </VStack>
<VStack alignItems="flex-start" spacing={0}> <VStack alignItems="flex-start" spacing={0}>
<Button <Button
@@ -174,7 +181,7 @@ const ExportLogsModal = ({ disclosure }: { disclosure: UseDisclosureReturn }) =>
isChecked={removeDuplicates} isChecked={removeDuplicates}
onChange={(e) => setRemoveDuplicates(e.target.checked)} onChange={(e) => setRemoveDuplicates(e.target.checked)}
> >
<Text>Remove duplicates? (recommended)</Text> <Text>Remove duplicates (recommended)</Text>
</Checkbox> </Checkbox>
</VStack> </VStack>
</Collapse> </Collapse>