661047 - Some diffs run under the sidebar

Status: VERIFIED FIXED

(support.mozilla.org :: Knowledge Base Software, task)

Description

[Verdi [:verdi] Best to slack me]

I can't figure out the steps to reproduce but many article diffs run under the sidebar on SUMO in their initial state. When they are expanded they go over the sidebar. I've only seen this issue on the initial state.

Here is an example from the How to set the home page article:
https://support.mozilla.com/en-US/kb/How%20to%20set%20the%20home%20page/compare?to=12786&from=840

Here's another diff from that same article that isn't broken:
https://support.mozilla.com/en-US/kb/How%20to%20set%20the%20home%20page/compare?to=12786&from=10626

I see the same behavior on Fx 4 - 7, Mac and Windows.

Comment 1

[Rebecca Billings [:rbillings]]

I was unable to repro using large deletions and additions of text- although I can see the toggle underneath the sidebar on the examples above.

Comment 2

[Tanay Gavankar [:tgavankar]]

This seems to be caused by having very long words in the diff being styled with diff-sub or diff-add (giving them green/red highlights). In particular, a "long word" means an image/video filename. For some reason, it doesn't break the word for word-wrap if it's wrapped in a <span> (which only occurs if there's special markup around the text).

If you firebug out the td's with a <span> inside that contain long words (primarily image/video links), you'll see the table reshift back into it's original size.

Not sure what the fix is, since this HTML is all generated by difflib (afaik).

Comment 3

[Ricky Rosario [:rrosario, :r1cky]]

I think the issue is due to the weirdness of `display: table-cell;` which can have widths set but are kind of elastic. I put together a little example where I changed the <td/>s to `display: inline-block;` and then word-wrap behaves correctly again: http://jsfiddle.net/PArtk/

I tried giving td.text a width and setting `display:inline-block;` and it is promising. But then we need to probably set that back for the case of the full screen diff (`table.diff.full td.text`).

Comment 4

[Tanay Gavankar [:tgavankar]]

Fixed in https://github.com/jsocol/kitsune/commit/dcba8055.

Comment 5

[Rebecca Billings [:rbillings]]

Verified with same article, diff displays correctly when toggling teh diff- no longer displays under the sidebar.

https://support-release.allizom.org/en-US/kb/How%20to%20set%20the%20home%20page/compare?locale=en-US&to=5893&from=840