Using font size greater than 16 cause docs to render oddly

[iamsauravsharma]

Changing default font size from 16 to 17 on Firefox makes docs.rs page to render oddly.

Default font size: 17

Default font size: 16

[SylvainMartel]

Same behavior in Chrome too if you change the Font Size setting to anything higher then "medium"

[jsha]

That might be related to #92448, which changed our font sizes from px (absolute) to rem (relative to the user's font size). I don't see how that could produce the symptoms you're seeing, but it's related to font sizes.

Do you see this on all crates, or just recently built crates?

[SylvainMartel]

@jsha Indeed, this seems to only happens on newer crates. Even older version of a crate in problem will display properly, but the most recent one has the problem(ex: https://docs.rs/axum/0.2.4/axum/index.html is fine, but https://docs.rs/axum/latest/axum/index.html has the problem.

[jsha]

A little quick investigation shows this is because the <main> element is in a flexbox alongside the sidebar, and the browser is choosing to shrink it from its default size (but seemingly only when the font size is bigger than default?).

Setting flex-shrink: 0 on <main> seems to fix, but I'm not sure that's the correct solution.

[jsha]

Also, unchecking the main { min-width: 0 } rule (or setting it to auto seems to do the trick. https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

[jsha]

@cynecx in your PR fixing the sidebar to use flexbox (thanks for that!), you had:

main {
	position: relative;
	flex-grow: 1;
	padding: 10px 15px 40px 45px;
	min-width: 0;
}

Do you happen to remember why you set min-width: 0?

[cynecx]

Setting flex-shrink: 0 on

seems to fix, but I'm not sure that's the correct solution.

Yeah I agree, I don't think that's the proper fix.

Do you happen to remember why you set min-width: 0?

I don't quite remember but I think it was because flex child elements have min-width defaulted to auto that caused the child to overflow the parent.

But I don't think that's the proper fix here.

If we look at the flex container:

We can see that the flexbox container isn't utilizing the whole width (because it hasn't been set!). So perhaps the proper fix would be to make the flex container width: 100%? (I've tested it locally and it seems to work just fine)

[jsha]

I propose closing this in favor of #93120 (or moving this issue to the rust repo if that's possible?).

[Nemo157]

@jsha transferred

[jsha]

@cynecx The width: 100% thing you posted works, but it's unsatisfying. If the issue is lack of an explicit width: 100%, why does this only show up on font sizes >16px?

Here's another possible fix: set font-size: 16px on div.nav-container. The page was previously inheriting font-size: 16px from rustdoc's CSS, which sets that on body. When rustdoc's CSS changes to font-size: 1rem (i.e. respect what the user set), that also affected the font size in the topbar. Since the docs.rs topbar has a fixed height of 33px, this caused some of the elements to overflow the topbar, at which point they interfered with <main>'s ability to automatically grow as far as it needed.

What I like about this solution is it doesn't layer tweaks on top of tweaks. Instead, it's adding back in something explicit that docs.rs was implicitly depending on, but that it shouldn't have been.