Bug report: Large tables causing horizontal scrolling on mobile

[wackerow]

Describe the bug

Markdown tables are currently supported, however, they are not styled appropriately to prevent horizontal scroll for large tables on mobile devices.

This has surfaced during discussions for the upcoming events page template found in PR #34, where markdown tables were going to be used to display an agenda.

To reproduce

Currently not able to reproduce from production, as no tables are being used yet. After #34 is merged, then this can be seen on https://soliditylang.org/solidity-summit-2022 on a mobile screen. This table will overflow the size of the parent adding undesired horizontal scroll to the window.

Expected behavior

Table is bound by a box that caps the width with the parent and uses overflow auto to handle scrolling for the table alone when needed.

Screenshots

No response

Desktop (please complete the following information)

No response

Smartphone (please complete the following information)

No response

Additional context

During attempts to implement, receiving an error for the Chakra-UI Table component.

The markdown components are styled using ChakraUIRenderer from the chakra-ui-markdown-renderer library, handled within the src/styles/MDStyles.tsx file. When attempting to add a styled table entry to the object, the following error results:

Server Error
ContextError: useTableStyles returned is 'undefined'. Seems you forgot to wrap the components in "<Table />" 

The pattern attempted was:

  table: ({ children }: any) => (
    <Flex overflowX='auto'>
      <Table
        variant='striped'
        border='1px'
        borderColor='blackAlpha.50'
        my='6 !important'
        size={{ base: 'sm', lg: 'md' }}
        w='auto'
      >
        {children}
      </Table>
    </Flex>
  ),

... which is analogous to that used in the Geth Website repo located here.

This was withheld from PR #34 to prevent blocking the new event page.