Some diffs run under the sidebar

VERIFIED FIXED in 2011-06-21

Status

VERIFIED FIXED
8 years ago
8 years ago

People

(Reporter: verdi, Assigned: tgavankar)

Tracking

unspecified
2011-06-21

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [2011-06-16])

(Reporter)

Description

8 years ago
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.
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.
(Assignee)

Comment 2

8 years ago
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).
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`).
(Assignee)

Updated

8 years ago
Assignee: nobody → tgavankar
(Assignee)

Comment 4

8 years ago
Fixed in https://github.com/jsocol/kitsune/commit/dcba8055.
Status: NEW → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → FIXED
Target Milestone: --- → 2011-06-21
Whiteboard: [2011-06-16]
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
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.