Skip to content

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

Open
@MDLC01

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working.docsImprovements or additions to documentation UX.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions