ConsenSysMesh / ConsenSysMesh/rimble-ui

Table component docs overflow container

Open
#420 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
455
Forks
60
PR merge metrics
No merged PRs in 30d

Description

**Describe the bug**
Per [this issue](https://github.com/ConsenSys/rimble-storefront/issues/143) in the `rimble-storefront` repo, the Table example in the docs and one in the Do's & Dont's overflows its container at smaller viewports.

[It was decided that](https://github.com/ConsenSys/rimble-storefront/issues/143#issuecomment-553528549) it was out of scope for the `rimble-storefront` repo and should be brought over to here.

**To Reproduce**
Steps to reproduce the behavior:
1. Go to https://rimble.consensys.design/components/rimble-ui/Table
2. Reduce your browser window consistently to see the bug.

**Expected behavior**
The `Table` should be set to `overflow-x: scroll` in order to scroll horizontally when in danger of overflowing its container.
`Padding` should also be made responsive, with smaller amounts of padding on all table headings and cells at smaller viewports to avoid vertical text.

**Screenshots**
https://user-images.githubusercontent.com/797290/68433312-72604500-0173-11ea-86d6-56106783bb36.png

https://user-images.githubusercontent.com/797290/68433365-8e63e680-0173-11ea-9ced-17895fc66275.png

**Rimble UI Version**

- 0.7.1 (latest)

**Desktop (please complete the following information):**
- OS: MacOSX 10.13.13
- Browser: Chrome
- Version 78

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.