Post History

Broken edit diffs on narrow mobile screens

When viewing a post edit diff on mobile the side by side format for before and after makes each side very narrow in portrait mode. Text wrapping appears to only happen between words, leaving longer words overflowing from the left hand (before) side and extending behind the right hand (after) side, obscuring part of the word:

![Current look of a diff on mobile in portrait mode](https://meta.codidact.com/uploads/5rmuig7ga3i2t2k9yqvydydq49ek)

This looks much better in landscape mode:

![Current look of a diff on mobile in landscape mode](https://meta.codidact.com/uploads/au7toqw8xsed49lck0pytupd4xph)

## Possibilities
What would be the best way to improve this situation?

### Wrapping mid-word
Allow wrapping mid-word so that long words do not exceed the available width.

![Diff with long words broken over multiple lines](https://meta.codidact.com/uploads/xgu1yezhhaa6bdh5aa26s8clbs2r)

I have avoided hyphens for the word breaks as this is the middle of a URL, but the red and green highlighting makes it clear that the earlier lines end in a space whereas these mid-word line endings have no space.

### Suggest landscape
Have a dismissable note above the diff recommending switching to landscape mode. The note can automatically appear when the width is too narrow to comfortably display the diff side by side.

![Diff with dismissable notice suggesting landscape mode](https://meta.codidact.com/uploads/dfsazt24an1j015bzr1z9808pmok)

### Vertical rather than horizontal
When the width is below some threshold, display the before and after versions above and below, rather than left and right, so they both have twice as much width.

![Diff with before and after sections vertically one after the other rather than side by side](https://meta.codidact.com/uploads/s7lgludi0016qrwvx51qcqlb1q57)

### Inline diff
Switch to inline diff instead of side by side diff when the width is below some threshold.

#### Individual letters shown as inline diff

![Inline diff with only the changed letters repeated](https://meta.codidact.com/uploads/98rl6y5pw4ha40c7d4t7lqsa7zvq)

#### Containing word shown as inline diff

![Inline diff with whole word repeated where a letter has been changed](https://meta.codidact.com/uploads/5ue3q6qfrhaps0cxpq0itulxl4h2)

### Unified diff (interleaved before and after lines)
Switch to unified diff instead of side by side diff when the width is below some threshold (full width content with an edited line showing twice, in red for the before and then in green for the after).

![Unified diff showing before and after versions of a whole line at a time](https://meta.codidact.com/uploads/s73qxrzmy50gu79evzfm5t85g5hk)

### Combination / choice
Some combination of several of these approaches, or the option to switch between them.

## Example of what GitHub calls "split" and "unified" diffs
### Split diff
This causes a lot of wrapping onto the next line with a narrow screen.

![GitHub split diff showing before and after side by side](https://meta.codidact.com/uploads/m0w3fcyhry9nbtrjhlekqh4itxb5)

### Unified diff
This reduces the amount of wrapping with a narrow screen.

![GitHub unified diff showing each changed line twice, one under the other](https://meta.codidact.com/uploads/y364pwjfypmpi3yq6xeutc1mftzs)

Note that these GitHub diffs also allow the text wrapping to break long words (in both split diff and unified diff).

Since we do not need to display line numbers, hopefully we can make even better use of the space with a unified diff. How does this compare with inline diffs? What are your preferences?