Overlapping text in upper-left pane (Cleopatra "Local Profile" list), due to leaking float effects

[dholbert]

STR (for me at least):
(1) Record 4+ profiles using the Gecko Profiler Add-on.
(2) View one of them and look at your Local Profile list in upper-left

ACTUAL RESULTS: Overlapping stuff. See attached screenshot.

[dholbert]

The problem here is:
(1) The red "X" (fileListItemDelete) is a float, listed at the very end of each fileListItem.
(2) So, its static position is bleeding off the bottom of the entry. (You can see this if you disable position:relative.
(3) It is then relatively-positioned back up inside the entry -- but its layout effects lower down remain. (since relative positioning is just a shift-around-after-layout-has-happened kind of a thing)
(4) So, each fileListItem (each entry here) is really effectively taller than its specified size, because of these float bleed effects, and eventually it wraps around back into itself in a gross way.

[dholbert]

I think the best fix would be to address "(1)" from my previous comment -- just move fileListItemDelete earlier in the DOM, e.g. put it between fileListItemTitle and fileListItemDescription.

Not sure where this has to happen -- presumably in whatever JS it is that generates this DOM.

[dholbert]

Screencast showing my suggested fix in action (manually tweaking the DOM using devtools, and then adjusting the relative position "top" property of the red x's):
http://people.mozilla.org/~dholbert/bugreports/cleopatra-reorder-dom.ogv