Top bar / header does not scale properly when page font size is changed

[brookisme]

myst version: v1.3.17

Hi Everyone - As discussed here the line separating the header from the body is off.

Description

Here is what it looks like on this page:

Looking around for solutions I saw this repeated on other sites. I haven't come across a site that doesn't have this problem.

Proposed solutions

There are multiple possible solutions:

1. Setting a fixed height for the header. Playing with the CSS using height: 100px looks good to me
2. Either through proper CSS Settings or some javascript have a variable height that is automatically set correctly
3. Allow for custom CSS of this (and all elements)

I would strongly push for a combination of either (1) or (2), and (3). I'm guessing (1) would be an easy fix and (3) could be worked on as a future enhancement. My thoughts on (3) are discussed here

Additional notes

To add some urgency in the kindest possible way (I know everyones working hard doing an amazing job with myst), It may seem small but having the first thing users see be a broken header will prevent me from myst in a professional public way. I'm still happy to use it to generate internal presentations or papers but its not something I could push out to a wider audience.

Thanks!

[agoose77]

@brookisme thanks for reporting this. Can you report your browser? I don't see this on the page that you've linked.

We are aware that the choice of breakpoints is sometimes the driver of overflow on intermediate screen sizes (and need to make a pass at that), but this doesn't look like the same issue to me.

[choldgraf]

Yes this looks normal to me on Arc browser on a macbook:

[brookisme]

I should have thought to check other browsers.

I'm on a Mac using

Chrome Version 131.0.6778.70 (Official Build) (arm64)

I just checked Safari 16.3 and it doesn't show up there

The Safari view is great - I'd be happy to use it but if I was being nit-picky I'd still want the line pushed slightly down so space above and below the search box were even.

That sort of nit-pickyness might be a good usage of the custom CSS request. Is that worth rolling over into a separate issue/feature-request?

[brookisme]

I just realized the problem was that I had set my fonts to be large (sadly my eyes aren't aging well).

If I reset my fonts to normal-size the bar appears correctly. Far outside my area of expertise but I'm guessing there is a way to set the CSS so that it works with whatever font size the user has chosen. That said the above mentioned simplicity and urgency have just changed dramatically.

Thanks @agoose77 @choldgraf - do let me know thoughts on the custom CSS which still seems very relevant.

[rowanc1]

Quite right - we do fix the nav bar in px rather than in rems, which would scale with font size.