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

Screen.Recording.2024-06-02.at.16.11.06.mov

After

Desktop:

Screen.Recording.2024-06-02.at.16.14.21.mov

Mobile:

Screen.Recording.2024-06-02.at.16.16.40.mov

[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:

Screen.Recording.2024-06-10.at.23.46.44.mov

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.