Modals aren't mobile-friendly

[MikeLockz]

Describe the bug When a modal appears on mobile, it is cutoff and not visible when the content extends beyond the window width.

To Reproduce https://rimble.consensys.design/components/rimble-ui/Modal#gatsby-focus-wrapper

Expected behavior Modals should be responsive.

Screenshots

Rimble UI Version

• 0.10.0 (latest)

Additional context Add any other context about the problem here.

[gesquinca]

@MikeLockz this isn't a rimble-ui bug. The component in the example has a width of 420px, so the width is going to be 420px. The component in the example should have maxWidth={'100%'} set.

[gesquinca]

I would update the example to this:

<React.Fragment>
        <Button onClick={this.openModal}>Open Modal</Button>
        <Modal isOpen={this.state.isOpen}>
          <Card width={'420px'} maxWidth={'100%'} p={0}>
            <Button.Text
              icononly
              icon={'Close'}
              mainColor={'moon-gray'}
              position={'absolute'}
              top={0}
              right={0}
              mt={3}
              mr={3}
              onClick={this.closeModal}
            />
            <Box p={4} mb={3}>
              <Heading fontSize={3} mb={3} mr={4}>
                Confirm {'{'}Action Name{'}'}
              </Heading>
              <Text>
                Are you sure you want to {'{'}Action Name{'}'}?
              </Text>
            </Box>
            <Flex
              flexDirection={['column', 'row-reverse']}
              justifyContent={'flex-start'}
              px={4}
              py={3}
              borderTop={1}
              borderColor={'blacks.3'}
            >
              <Button ml={[0, 3]} mb={[2, 0]}>Confirm</Button>
              <Button.Outline >Cancel</Button.Outline>
            </Flex>
          </Card>
        </Modal>
      </React.Fragment>