Seeing two copies of the header at a certain breakpoint

circuitpython / web-editor

Online web editor for CircuitPython

https://code.circuitpython.org

MIT License

30 stars 15 forks source link

Seeing two copies of the header at a certain breakpoint #192

Closed tyeth closed 4 months ago

tyeth commented 4 months ago

CircuitPython Version

I was messing around with hijacking the websockets to recreate the bluefruit connect packets inside http://IP/code/ and spotted my selector returned two connect buttons, but then I actually saw both at once, seemingly picking the perfect resolution to get both small and big nav menus.

Workflow(s)

WEB

Browser(s)

windows 11, chrome 125.0.6422.76 (Official Build) (64-bit)

Console Log

No response

Steps

Move window to half screen

Description

No response

Additional information

Screenshot 2024-05-24 015714

tyeth commented 4 months ago

same happens at code.circuitpython.org

makermelissa commented 4 months ago

Which browser are you using? It looks like it maybe allows fractional windows sizes between 767px and 768px, which might be causing it. This problem doesn't seem to be reproducible on Chrome for MacOS.

makermelissa commented 4 months ago

Never mind, I see you already answered my question; I just missed it the first time.

makermelissa commented 4 months ago

It might be caused by a discrepency between using min and max here: https://github.com/circuitpython/web-editor/blob/main/sass/layout/_header_mobile.scss#L99 and here: https://github.com/circuitpython/web-editor/blob/main/sass/layout/_header.scss#L138

makermelissa commented 4 months ago

Ok, looks like I was correct about the fractional window sizing. I just noticed this in your screenshot:

Which means, I was probably correct about the use of both min and max. Ideally, they should be the same.