argotorg / argotorg/solidity-website
Bug report: Large tables causing horizontal scrolling on mobile
- Dominant language
- JavaScript
- Stars
- 30
- Forks
- 29
- Avg merge
- 8h 15m
- Merged PRs (30d)
- 7
Description
### 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:
```log
Server Error
ContextError: useTableStyles returned is 'undefined'. Seems you forgot to wrap the components in ""
```
The pattern attempted was:
```tsx
table: ({ children }: any) => (
{children}
),
```
... which is analogous to that used in the Geth Website repo [located here](https://github.com/ethereum/go-ethereum/blob/d4f3ea4aac664dbdbf8d55b1dd3024e19e10e661/src/components/UI/docs/MDComponents.tsx#L104C3-L104C8).
This was withheld from PR #34 to prevent blocking the new event page.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with src/styles/MDStyles.tsx and inspect how ChakraUIRenderer supplies the table component context; the issue includes the failing Chakra UI pattern and the target solidity-summit-2022 page. Done means large Markdown tables stay within the parent and any required scrolling is confined to the table area on mobile.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100