Elements from Search Suggestions menu spilling over onto the main elements of the page

[robbie-hunt]

Hi, I discussed this issue with customer support (George) and was told to post it here.

The search page seems to be designed in such a manner that hides the items from the Search Suggestions menu above the page, out of sight, which creates the issue that when these menu items are either large in number, have long titles, or the viewport is small/zoomed in, the actual HTML elements of the Search Suggestions menu spill down from above the page on to the main elements of the page, disrupting interactivity with the page. Again, this depends upon things that might affect the size of each element in the Search Suggestions menu.

The issue can be recreated by just increasing the amount of items in the Search Suggestions menu, or decreasing the height of the viewport (haven't tested decreasing width, although I would image it is the same as decreasing height).

Search.Suggestions.overflow.issue.mp4

Above is video where you can see me demonstrate the elements seemingly existing above the webpage and overflowing on to the webpage from the top. I first show the number of items in the menu, then I switch over to Firefox Developer Edition that has an incognito non-logged in session on the homepage, with dev tools activated. I click on the search bar to show the items displayed in the correct Search Suggestions menu, and the fact that they go beyond the height of the viewport (but I cannot scroll down to view more of them, which is also an issue that should be addressed afterwards). I then exit the search page and I hover over some of the last few li elements of the Search Suggestions menu in dev tools, to show how the last couple of items spill over onto the viewable section of the webpage. I also adjust the viewport size slightly, and you can see the items shift in place - more of them cover the viewable area.

Since recreating this issue depends upon the size of the elements in the Search Suggestions menu, simply limiting the amount of items in the Search Suggestions menu and making sure their names aren't too big may temporarily fix it, although it might be hard to get around fully as the issue of overflowing of these items depends on lots of factors - some devices/screens might be much smaller, some people may be zoomed in. So as much as I can limit the menu items, I can't be assured that someone isn't experiencing a weird glitch of not being able to properly interact with the webpage due to the overflow of these items. It also isn't a proper solution to the problem.

I don't expect to be using so many items in the Search Suggestions menu, although this website is for a local newspaper with lots of little communities, and many readers will want to see news related to their communities, so being able to click on the search icon and then find their community and click on it would be a function I would like to have on the site.

All of the items in the Search Suggestions menu are a non-hierarchical custom post taxonomy called 'Communities'. I would like to be able to show only the few most popular communities, although this doesn't seem to be possible so I would rather show all the communities (roughly 50).

I'm using PHP 7.4, WordPress 6.2, Felt LT (Anima) 2.0.10.