# When wide content makes the whole page scroll sideways

> Content can render correctly and still break the surrounding layout. Find the element that needs extra width and contain scrolling there so nearby content remains stable and reachable.

Repository: syntaxskills/muxmap · Category: Content and files · Status: Active

Keywords: Markdown, table, horizontal overflow, scroll container, mobile, accessibility

## When to use this lesson

- A table makes the entire page move sideways.
- Long URLs or identifiers push a preview beyond the screen.
- Offscreen columns are clipped or cannot be reached with a keyboard.
- Table boundaries are difficult to see in one theme.

## What happened

MuxMap's Markdown preview rendered tables, but wide tables could expand the page rather than scroll independently. A separate earlier patch improved cell borders and header backgrounds.

## Diagnosis and approach

Markdown parsing produced valid HTML; it did not determine where overflow should go. The preview lacked a constrained horizontal scroll region around each table.

For a similar layout problem, compare the page width with each oversized element and its ancestors. Check which element scrolls and whether the last column remains reachable. That separates a rendering failure from a containment problem.

## What did not work

The earlier border patch, `c3c3852`, made cells easier to distinguish but did not add an overflow boundary. The later patch, `50b434a`, added the table wrapper and viewport metadata. They address different parts of usability.

No failed clipping experiment is documented. Hiding page overflow is an alternative to avoid when it merely cuts off columns rather than making them reachable.

## What changed

Wrap each rendered table in its own region with max-width: 100%, overflow-x: auto, and horizontal overscroll containment. Keep border-collapse on the table. Give the region a visible keyboard focus style and an accessible name so keyboard users can reach offscreen columns.

Add a mobile viewport meta tag and use explicit cell borders with sufficient contrast in both themes. Apply the wrapper in the shared table renderer so all Markdown tables follow the same rule.

```css
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
```

## How to verify the improvement

Render a table with many columns, long unbroken text, and URLs. Check desktop and narrow mobile viewports in light and dark modes. Scroll to the last column and confirm window.scrollX stays zero, the heading does not move, and a second table retains its independent scroll position. Test keyboard scrolling and visible cell borders.

## What to do next time

When one piece of content needs extra width, give it a local scroll region while keeping the page within the viewport. Preserve access to the last column by touch and keyboard. Verify both containment and readability; fixing borders does not establish that the layout is contained.

## Limits and exceptions

Use local overflow containment for content that genuinely needs width. Hiding all page overflow can conceal unreachable content and mask the underlying layout issue. A table wrapper does not fix unrelated wide elements such as code blocks or fixed-width headers.

## Commit evidence

- [syntaxskills/muxmap@50b434a](https://github.com/syntaxskills/muxmap/commit/50b434aa7e5f26a5a07483a5462ba510011a1c46): Wrapped every Markdown table in a keyboard-focusable horizontal scroll region and added viewport metadata.
- [syntaxskills/muxmap@c3c3852](https://github.com/syntaxskills/muxmap/commit/c3c385212dfd652cc22507de3b5f1d0f56351228): Added visible cell borders and header backgrounds for both preview themes.