Long class names overlap with source file location and go out of bounds

[mvriel]

In the default template when there is a lengthy class name, this name may become too long and overlap with the file name in the top right.

Example:

This is undesirable and a nice solution should be found on resolving this. Wrapping to the next line may be an option (though, how would you hyphenate), make the text smaller (but wouldn't that be too small?) or moving the source file indicator a little (or the title) are possible solutions.

Unfortunately, trying these out is the only way to determine an aesthetically pleasing solution

[ashnazg]

My first thought would be to split the bold classname heading on its CamelCase boundaries, e.g.
Command line
Options
Middleware

[jrfnl]

I've ran into this as well.

I've been playing a little with solutions, but I got the feeling the CSS classes are re-used a lot, which means that it would affect quite a few things when changing anything.

Adding a padding-top of approx 20px to the H2 would work but looks off.

An alternative solution would be to move the file reference up to be next to the breadcrumb, that would work fine for the class where I found the issue, but would be problematic for deeply nested classes.

Moving it to above the breadcrumbs could work, but then it starts to feel very disconnected to the class it pertains to.

All in all, I haven't found a solution yet which feels right, but wanted to share these experiments.

[mvriel]

Thank you for sharing; this is still an ongoing issue and I recognize the considerations that you have. I am starting to wonder if I shouldn't just design this in a completely different location / way. More updates follow :)