yari icon indicating copy to clipboard operation
yari copied to clipboard

fix(tables): wrap in table-container-inner

Open caugner opened this issue 2 years ago • 2 comments

Summary

Fixes https://github.com/mdn/yari/issues/9962.

Problem

Tables in blog articles were overflowing on sm/md/lg screens, because they were only wrapped in figure.table-container, but not in figure.table-container-inner (like the BCD table).

Solution

Wrap tables in figure.table-container > figure.table-container.inner.


Screenshots

Before After
image image

How did you test this change?

Ran yarn && yarn dev and opened http://localhost:3000/en-US/blog/vs-code-tips-tricks/#shortcuts_for_navigation locally (requires mdn/mdn-studio).

caugner avatar Nov 08 '23 13:11 caugner

Unfortunately, the current approach would cause a regression for large tables:

Before

image

After

image

caugner avatar Nov 08 '23 20:11 caugner