Code blocks without associated rendered code can overflow without a scroll bar

[MDLC01]

Description

In the Table guide, block code examples that are not associated with a rendered preview do not have overflow-x: auto. This makes them visually overflow on mobile, and induce a scroll bar on the entire page.

The first such code example is accessible by searching for "your whole document" in the page.

This issue is due to the CSS following CSS rule:

.previewed-code pre {
  overflow-x: auto;
}

This rule does not apply to code blocks without previews, which are bare pre elements with no container.

Another similar issue is that code elements have whitespace: nowrap, which prevents the inline code [FDP], table.cell(fill: yellow)[Theodor Heuss] from being wrapped as well. This is also an issue on mobile.

Both those issues need to be solved in order to prevent the page from being horizontally scrollable.

Reproduction URL

https://typst.app/docs/guides/table-guide/

Browsers

No response

OS

No response