450342 - Diff view overlaps the sidebar content

Status: VERIFIED FIXED

(support.mozilla.org :: General, defect, P3)

Description

[Stephen Donner [:stephend] Not actively reading bugmail]

Attachment: Screenshot

URL: http://support.mozilla.com/tiki-pagehistory.php?locale=en-US&page=Support+Website+Forums&compare=1&oldver=11&newver=12&diff_style=sidediff

Summary: Diff view overlaps the sidebar content

Step to Reproduce:

Load http://support.mozilla.com/tiki-pagehistory.php?locale=en-US&page=Support+Website+Forums&compare=1&oldver=11&newver=12&diff_style=sidediff

See screenshot

Comment 1

[E. Cooper [:ecooper]]

Ugh. Word wrapping...The solution to this will probably be the same as Bug 413579.

Aside from just clipping the output using overflow, there aren't many options available for CSS, We could use word-break (in CSS3, I believe), but it doesn't work in Firefox 3.

<wbr>'s don't validate and don't work with Opera, so inserting some &#8203;'s is probably the better solution. I think they work on all modern browsers.

Comment 2

[David Tenser [:djst]]

I have no real opinion on the implementation, but your proposal sounds reasonable. Is there a way we could test/demo how that would work?

Comment 3

[E. Cooper [:ecooper]]

​ and ­ are both zero-width spaces. So, you throw some in a string every some many characters (every other, every five, whatever), the line will break if it starts to overflow.

http://www.quirksmode.org/oddsandends/wbr.html

The above shows examples of <wbr>, &#8203;, and &shy; in action. When I implement it, you could just view it on my dev server first, which is accessible via the web most times.

Comment 4

[David Tenser [:djst]]

Looks like ­ is the best option, no? Either way, the proposal sounds like a good solution!

Comment 5

[Paul Craciunoiu [:paulc]]

Eric, what's the status of this? If you have anything on this but are too busy, I can take it up and implement it. There are a bunch of bugs on word-breaking that'd be good to fix for 1.1

Comment 6

[E. Cooper [:ecooper]]

Attachment: Broken diffs?

Are diffs broken in general?

I was testing a fix before I realized they look fundamentally different than the original sreenshot now.

Loading the link in the bug summary will display you a diff that looks like the one in this screenshot.

Comment 7

[Stephen Donner [:stephend] Not actively reading bugmail]

Yeah, that looks broken to me :-(

Comment 8

[Chris Ilias [:cilias]]

The first screenshot is comparing versions 11 and 12. The second screenshot is comparing versions 10 and 12.

Comment 9

[E. Cooper [:ecooper]]

https://support.mozilla.com/tiki-pagehistory.php?locale=en-US&page=Support+Website+Forums&compare=1&oldver=13&newver=12&diff_style=sidediff

Huh. Well, aside from me looking dumb, that's great! It means I can post my patch.

Comment 10

[E. Cooper [:ecooper]]

Attachment: v1

This is combination of adding a zero-width break and some CSS rules.

The regex is used because wordwrap kills entities.

Comment 11

[E. Cooper [:ecooper]]

r24453/r24454

Aside from making sure diffs stay within bounds, we should be checking that all side-by-side diffs still work.

Comment 12

[Stephen Donner [:stephend] Not actively reading bugmail]

Looks good on https://support-stage.mozilla.org/tiki-pagehistory.php?locale=en-US&page=Support+Website+Forums&compare=1&oldver=11&newver=12&diff_style=sidediff.

Verified FIXED -- tested using HTML diff too.