fix(search-box): make search results scrollable

[pseudopilot]

Summary

Fixes #5650 (the second (remaining) part of it)

Problem

When search results overflow the viewport the navigation by arrow UP and DOWN buttons across the list doesn't scroll the page. As a result we can't see (without additional page scrolling) which search result option outside viewport is currently selected.

Solution

The outer container of search results is calculated the way that it never overflows the viewport and become scrollable if needed. It allows to scroll the list of results via arrow UP and DOWN buttons keeping selected option always in the viewport.

Before

https://github.com/mdn/yari/assets/40791399/3c3d0910-6243-4ba9-8745-6ec548ed6276

After

Desktop:

https://github.com/mdn/yari/assets/40791399/e7fd98df-13c2-4792-9c5b-9861ef3b756a

Mobile:

https://github.com/mdn/yari/assets/40791399/177a2998-7773-4486-b06f-f9e1bfd0f244

[fiji-flo]

Hey, nice work. I see the pain point. I think this is actually a CSS issue.

If you just use:

.header-search .search-results {
    max-height: calc(100vh - var(--sticky-header-without-actions-height) - 4rem);
    overflow-y: auto;
}
``

the issues should be fixed without any JS. Could you look into that?

[pseudopilot]

max-height: calc(100vh - var(--sticky-header-without-actions-height) - 4rem);

@fiji-flo , just checked. It does fix the problem for the header search, but doesn't fix for the home page search:

https://github.com/mdn/yari/assets/40791399/1d18b70f-b250-4e38-86b2-7ea4291542a0

I'm sure (from my own experience) that the header search is being used much more often. So, do we want to fix this only for it just with CSS? If yes, I'll update my PR.

[caugner]

Thank you so much for taking the time to work on this issue. 🙌

We're actively working on a new MDN frontend that includes a revamped search box. This means we're not making any changes to the current search interface, and so I'm closing this PR.

Thank you for your understanding. 🙏