something went wrong with logo

[matkoniecz]

not sure why it was not caught in my earlier tests?

[matkoniecz]

It looks like longer text caused box to become wider and failing out of their lines.

Forcing them with max-width: 107px; works but obviously it is not a solution.

[matkoniecz]

font-size: .8em; in .category-title is a bit more proper hack but... Still a hack.

[mdsimpson42]

This did happen when we originally changed the category names, but I tested it at a range of Zoom levels on my local machine and on Staging... The little logo at the top and in the key was getting stretched, which I fixed.

I just tried it now, locally, on staging and on production and I can't replicate. Does it happen at particular zoom levels or resolutions?

[mdsimpson42]

Or in a particular browser?

[matkoniecz]

not sure why it was not caught in my earlier tests?

That is because for body following definition is new, and replaced older: font-family: var(--bs-font-sans-serif);

I just tried it now, locally, on staging and on production and I can't replicate.

note that production has additional change reducing text size

Does it happen at particular zoom levels or resolutions?

100%, 1920 x 1200 px

Or in a particular browser?

Firefox 130.0.1 (64-bit)

[matkoniecz]

problem disappears on heavy zooming

it appears to be reliably triggered by editing labels, say with inspector to have oversized text length:

[matkoniecz]

.category-title {
    display: block;
    text-align: center;
    font-size: .9em;
    margin: 0;
    padding: .6em;
}

removing padding: .6em; reduces problem and text looks fine

still, Age & history looks better with larger padding

And it still does not eliminate root cause.

Adding soft hyphens sort-of works but may result in splitting words where it is not really needed.

[mdsimpson42]

Yeah, it's a tricky one. The padding was to try and make it look nice, Polly wanted, for example, Age & History not to appear all in one line, as it does on the second picture. I think she wanted the "&" in Typology and size would be on the next line too. I was just trying to do something that doesn't require too much additional code or adding custom code for each category...