Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to Codidact Meta!

Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.

Broken edit diffs on narrow mobile screens

+1
−0

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

This looks much better in landscape mode:

Current look of a diff on mobile in landscape mode

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

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

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

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

Containing word shown as inline diff

Inline diff with whole word repeated where a letter has been changed

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

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

Unified diff

This reduces the amount of wrapping with a narrow screen.

GitHub unified diff showing each changed line twice, one under the other

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?

History
Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

0 comment threads

0 answers

Sign up to answer this question »