Code popup is cut off on small screens

[danieltj27]

On my small laptop screen, which is roughly ~600px in height, the popup box with the highlighted code is cut off. I'd suggest changing the way the modal is positioned so users on smaller screens can scroll down to view the whole box.

I had to mess around with DevTools to get it working, but this should do the trick.

• Remove overflow: hidden; from .page-search .reveal-overlay on line 5749.
• Change .reveal element to have the following:

position: absolute;
left: 50%;
transform: translate( -50%, 0 );

I couldn't quite figure out how the body stops scrolling when the popup is open, but I assume that would just be a case of allowing it to have a natural height and auto scroll capability.

This might not be the full solution, but seems to be mostly there.

[PeterBooker]

Hey,

I see what you mean. I am actually rewriting the frontend at the moment and it has a similar issue, so this is great timing. Not entirely sure what the best fix is at the moment but will take another look this weekend.

Thanks for letting me know!