Use fixed positioning for .banner

[p8]

Prevent the banner from moving under the .panel__tray when overscrolling the top (similar to pull to refresh):

[jonathanhefner]

I am having trouble recreating the issue. I tried with both https://edgeapi.rubyonrails.org/ and https://deploy-preview-308--sdoc.netlify.app/ (the most recent preview for main) using Safari on iOS.

What is your setup like?

[p8]

@jonathanhefner I'm on OSX. This happens with Firefox and Chrome. Safari handles it properly.

[jonathanhefner]

I'm on OSX. This happens with Firefox and Chrome. Safari handles it properly.

Hmm, that is tricky. On Linux, Firefox and Chrome don't natively support overscroll. I can configure Firefox to support overscroll by setting apz.overscroll.enabled to true in about:config, but I still can't reproduce the issue, so something must be missing. And I haven't found a way to configure Chrome to support overscroll.

As you probably noticed in the preview, setting position: fixed removes .banner from the flow, causing other layout issues.

Shot in the dark: instead of adding position: fixed to .banner, if you add top: var(--banner-height) to .panel__tray does the issue still occur?