x/website: visualization tools in gc-guide have left text cut off with firefox

[eikenb]

What is the URL of the page with the issue?

https://tip.golang.org/doc/gc-guide

What is your user agent?

Mozilla/5.0 (X11; Linux x86_64; rv:91.0) Gecko/20100101 Firefox/91.0

Screenshot

What did you do?

Visited and started reading the gc-guide.

What did you expect to see?

The full interactive graphs.

What did you see instead?

The interactive visualization tools didn't fully show the Y axis labels. They were cut off on the left. The screenshot says it best.

[seankhliao]

The text in the svg looks suspiciously large, do you have settings (default font, font size)/extensions that may be affecting the rendering of the image?

I would expect it to look like:

[jamalc]

cc @mknyszek

[mknyszek]

It kind of seems like Firefox just behaves differently when some aspects of the font aren't explicitly set? The rest of the text looks OK. I suppose I didn't notice because of how it's rendered in Chrome (which is primarily what I tested this in).

I suspect this might just be an easy fix to explicitly set the font size for the axis labels.

(Please forgive my UI mistakes across browsers, this isn't an area I work in often so I didn't fully appreciate browser differences in rendering.)

[mknyszek]

I have a patch that might fix it, but I can't actually reproduce this in my local copy of Firefox on macOS. I don't have a Linux machine with a screen that I could try it on.

If you want to try the patch yourself, you can clone https://go.googlesource.com/website, patch in https://go.dev/cl/417634, and run go run ./cmd/golangorg from the repository root. The site will be served on localhost:6060 by default..

[gopherbot]

Change https://go.dev/cl/417634 mentions this issue: _content/doc: explicitly set font size for X and Y axis labels

[mknyszek]

I also put up another patch for the alignment issues you're seeing (and better small-screen behavior in general).