Logo becomes tiny at certain browser widths (when it doesn't need to be)

[cellio]

https://meta.codidact.com/posts/287549

As browser width changes, there is a span between phone-sized with larger logo and desktop-sized with larger logo where the logo gets tiny. Here's a series of screenshots from the linked meta post, which I just reproduced in Chrome on a desktop:

The two in the middle are much smaller than they need to be for those widths, and the progression is odd with it getting smallest in the "middle". Can we keep the "desktop" size until we flip over to "phone", without the state in the middle?

[cellio]

Possibly related: if a notification adds a number, that can push the logo to the smaller size, presumably because the extra width for the number is just enough to push the logo scaling over the line. Reported here: https://meta.codidact.com/posts/287740 .

[trichoplax]

Probably related to the notification number problem: Long reputation problem: https://meta.codidact.com/posts/287871

Might be worth thinking about all 3 problems together. They might all be Co-Design problems rather than QPixel problems, but I haven't looked into this.