fix(ui): settings modal switch widths

This commit is contained in:
psychedelicious 2024-01-20 20:05:43 +11:00
parent be72765d02
commit b00ace852d

View File

@ -2,6 +2,7 @@ import {
Button, Button,
Flex, Flex,
FormControl, FormControl,
FormControlGroup,
FormLabel, FormLabel,
Modal, Modal,
ModalBody, ModalBody,
@ -210,12 +211,13 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
isCentered isCentered
> >
<ModalOverlay /> <ModalOverlay />
<ModalContent maxH="80vh" h="50vh"> <ModalContent maxH="80vh" h="68rem">
<ModalHeader bg="none">{t('common.settingsLabel')}</ModalHeader> <ModalHeader bg="none">{t('common.settingsLabel')}</ModalHeader>
<ModalCloseButton /> <ModalCloseButton />
<ModalBody display="flex" flexDir="column" gap={4}> <ModalBody display="flex" flexDir="column" gap={4}>
<ScrollableContent> <ScrollableContent>
<Flex flexDir="column" gap={4}> <Flex flexDir="column" gap={4}>
<FormControlGroup formLabelProps={{ flexGrow: 1 }}>
<StickyScrollable title={t('settings.general')}> <StickyScrollable title={t('settings.general')}>
<FormControl> <FormControl>
<FormLabel>{t('settings.confirmOnDelete')}</FormLabel> <FormLabel>{t('settings.confirmOnDelete')}</FormLabel>
@ -247,7 +249,9 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
<StickyScrollable title={t('settings.ui')}> <StickyScrollable title={t('settings.ui')}>
<FormControl> <FormControl>
<FormLabel>{t('settings.showProgressInViewer')}</FormLabel> <FormLabel>
{t('settings.showProgressInViewer')}
</FormLabel>
<Switch <Switch
isChecked={shouldShowProgressInViewer} isChecked={shouldShowProgressInViewer}
onChange={handleChangeShouldShowProgressInViewer} onChange={handleChangeShouldShowProgressInViewer}
@ -289,7 +293,9 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
{shouldShowDeveloperSettings && ( {shouldShowDeveloperSettings && (
<StickyScrollable title={t('settings.developer')}> <StickyScrollable title={t('settings.developer')}>
<FormControl> <FormControl>
<FormLabel>{t('settings.shouldLogToConsole')}</FormLabel> <FormLabel>
{t('settings.shouldLogToConsole')}
</FormLabel>
<Switch <Switch
isChecked={shouldLogToConsole} isChecked={shouldLogToConsole}
onChange={handleLogToConsoleChanged} onChange={handleLogToConsoleChanged}
@ -352,6 +358,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
</> </>
)} )}
</StickyScrollable> </StickyScrollable>
</FormControlGroup>
</Flex> </Flex>
</ScrollableContent> </ScrollableContent>
</ModalBody> </ModalBody>