argotorg / argotorg/solidity-website

Bug report: Large tables causing horizontal scrolling on mobile

Open
#35 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.