Tables in the MDN blog cause scrolling or get clipped

[pepelsbey]

Summary

Tables in the MDN blog cause scrolling or get clipped in viewports between 426px and 895px (single-column layout) and between 992px and 1136px (two-column layout). As the mobile layout shows, it’s not caused by the table content, but mostly by the way it adapts to a viewport.

URL

https://developer.mozilla.org/en-US/blog/vs-code-tips-tricks/

Reproduction steps

1. Go to the article in MDN blog
2. Resize the window somewhere between 426px and 895px
3. Notice the table behavior

Expected behavior

No content clipping or horizontal scrollbar.

Actual behavior

Content clipping and horizontal scrollbar.

Device

Desktop

Browser

Firefox

Browser version

Stable

Operating system

Mac OS

Screenshot

table.mp4

Anything else?

It might be partially caused by the following code in the index-desktop.scss:

  .table-container {
    margin: 0 -3rem;
    overflow: auto;
    width: 100vw;
  }

width: 100vw doesn’t take into account vertical scrollbars (when they’re permanent, not floating), it’s the viewport width.

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[caugner]

It looks like the bug is caused by BCD tables being wrapped in figure.table-container > figure.table-container-inner and other tables are not wrapped in the figure.table-container-inner:

yari/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss

Lines 35 to 43 in 45aa619

	.table-container {
	margin: 0 -3rem;
	overflow: auto;
	width: 100vw;
	}
	.table-container-inner {
	min-width: max-content;
	padding: 0 3rem;

I don't know why we set a negative horizontal margin on the outer container and a padding on the inner container, but the fact that the inner container is missing on that blog table causes it to overflow by 1.5rem on each side.

[dipikabh]

I have a (related) issue with tables I came across while working on Vultr's post on MDN Blog.

As a quick fix for now, I've replaced the tables with screenshots (not an ideal solution) so that the article remains responsive on mobile devices. Replacing pre-formatted tables (as the one below) with HTML or markdown equivalents was not helping.

Here's one of the tables that was causing the article to be unresponsive:

```bash
┌────┬─────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id │ name            │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├────┼─────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0  │ express-demo    │ default     │ 1.0.0   │ cluster │ 3712     │ 6m     │ 0    │ online    │ 0%       │ 53.4mb   │ root     │ disabled │
│ 1  │ express-demo    │ default     │ 1.0.0   │ cluster │ 3722     │ 6m     │ 0    │ online    │ 0%       │ 53.8mb   │ root     │ disabled │
│ 2  │ express-demo    │ default     │ 1.0.0   │ cluster │ 3732     │ 6m     │ 0    │ online    │ 0%       │ 51.6mb   │ root     │ disabled │
│ 3  │ express-demo    │ default     │ 1.0.0   │ cluster │ 3742     │ 6m     │ 0    │ online    │ 0%       │ 53.6mb   │ root     │ disabled │
└────┴─────────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
```