RustDoc header collapse toggles are heinously misaligned

[erincandescent]

@QuietMisdreavus posted a screenshot of some RustDoc updates. In it, a header collapse button is shown. It is heinously out of alignment with the header text. I will never be able to unsee this and this bug will follow me to the end of my days.

Please can some CSS wizard fix the alignment of these widgets so that I will once again be able to use Rust documentation without involuntarily twitching each time a collapse toggle pops up.

[erincandescent]

Actually I see this is really a "description collapse" toggle and it mirrors one top-right by the source button. For further amusement, these toggles can get out of sync.

Maybe the annoying misaligned one on the left should be removed?

[QuietMisdreavus]

Nah, the one on the left only folds the crate description - it mirrors the top-level description of things like structs or traits, which stick their top-level docs there. The one on the top-right is to toggle everything on the page, which is more useful when there's more than one docblock to toggle.

cc @GuillaumeGomez - this should be a fairly small CSS fix, right?

[chris-morgan]

The difficulty is that the content is just generic content; it could start with an h1, an h2, a p, &c. Thanks to margin-top and line-height, positioning the toggle ideally requires knowledge of the first element in the content, and you’d need to customise it for each case.

With the way it’s all structured, there’s no way to fix this with CSS alone. The toggle is in a previous sibling of the content element, so you can’t target it with CSS depending on what the content starts with. The toggle would need a class added to it to signify what the content starts with, either in the rustdoc code or through JavaScript.

[GuillaumeGomez]

I'm not sure if this is such a good idea...

[bluss]

The [-] toggle is at least aligned fine when the doc comment does not start with a header, which is also a common thing like in https://doc.rust-lang.org/nightly/std/thread/struct.Thread.html

A couple of things happen if the doc comment starts with a header. This misalignment, and if you hover over the header, the collapse icon and the header's § icon overlap too.

[GuillaumeGomez]

@bluss: I don't see what overlap issue you're talking about...

[bluss]

@GuillaumeGomez The [-] icon and the § symbol overlap on Firefox and Chromium (Linux), it should be visible in these screenshots:

From URL: https://doc.rust-lang.org/nightly/std/

[GuillaumeGomez]

Oh I see. I'll write a fix when I get time.