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

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.

from cleopatra.

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.

from cleopatra.

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

from cleopatra.