Hi, and thanks for the library — it powers the diff viewer in our code-review product.
Problem
In split (viewType="split") view, long code lines always soft-wrap onto multiple visual rows. We'd like the option to keep each line on one row and let it scroll horizontally instead. There doesn't appear to be a supported way to do this today.
Why it's hard to work around
The split view renders both panes inside a single 4-column
with table-layout: fixed; width: 100% and library-owned elements. As a result:
- white-space: pre on the code cell just overflows/bleeds into the adjacent cell — the table never widens, so overflow-x: auto has nothing to scroll.
- min/max-width on
<td> is ignored per spec; only <col> widths constrain columns, and those are owned by the component template.
- There's no per-line wrapper element around the code tokens (they render directly into the
<td>), so the only injection point is a synthetic token via renderToken — which works but is fragile.
We found a workaround using renderToken + a CSS transform driven by custom scrollbars, but it's brittle and fights the table layout.
What would help (any one of these):
- A prop like wrapLines={false} / nowrap that switches long lines to horizontal-scroll.
- A stable per-line wrapper element (or a documented render hook) so consumers can control overflow/scroll per code cell.
- Guidance on achieving independent per-pane horizontal scroll with the current single-table split layout, if it's already possible.
Environment: react-diff-view 3.3.3, React 18, split view, parseDiff + tokenize.
Happy to share a minimal repro or a PR sketch if that's useful. Thanks!
Hi, and thanks for the library — it powers the diff viewer in our code-review product.
Problem
In split (viewType="split") view, long code lines always soft-wrap onto multiple visual rows. We'd like the option to keep each line on one row and let it scroll horizontally instead. There doesn't appear to be a supported way to do this today.
Why it's hard to work around
The split view renders both panes inside a single 4-column
with table-layout: fixed; width: 100% and library-owned elements. As a result:<td>is ignored per spec; only<col>widths constrain columns, and those are owned by the component template.<td>), so the only injection point is a synthetic token via renderToken — which works but is fragile.We found a workaround using renderToken + a CSS transform driven by custom scrollbars, but it's brittle and fights the table layout.
What would help (any one of these):
Environment: react-diff-view 3.3.3, React 18, split view, parseDiff + tokenize.
Happy to share a minimal repro or a PR sketch if that's useful. Thanks!