Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions docs/.vuepress/styles/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -425,3 +425,25 @@ div[class*="language-"] {
transform: none;
}
}

// ---------------------------------------------------------------------------
// Wide content scrolls inside its own box; the page never scrolls sideways.
//
// Code blocks already do this - the theme gives `pre` overflow-x: auto, which
// is why a 798px bash line sits happily in a 307px column. Tables had no such
// containment: a three-column table renders at its natural 595px and pushes the
// whole document to 619px against a 357px viewport, so the entire page scrolls
// horizontally on a phone. Found by measuring the rendered page, not the HTML -
// `getBoundingClientRect` on clipped code reports full width and sends you
// after the wrong element.
//
// `display: block` is what makes overflow-x apply at all; a `display: table`
// box ignores it. `width: fit-content` keeps narrow tables their natural size
// rather than stretching them to the column.
// ---------------------------------------------------------------------------
.vp-page table {
display: block;
width: fit-content;
max-width: 100%;
overflow-x: auto;
}
Loading