Site search results overlap page content

[CravateRouge]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/HugoBlox/hugo-blox-builder/issues?q=is%3Aissue
• [X] This issue is not a question, feature request, or anything other than a bug report directly related to Hugo Blox Builder. Please post those things on Discord: https://discord.gg/z8wNYzb

Description

In light theme mode, search results are overlapping the page behind without a background to separate both which create a fuzzy result:

Reproduction Link

https://github.com/CravateRouge/CravateRouge.github.io

Steps to Reproduce

1. Ensure you are in light theme mode
2. Click on the search button
3. Type a keyword as "certi" in the search bar
4. scroll and you'll see the overlapping ...

Expected Result

There should have a background for the search result in light theme to separate the search from the page behind

Actual Result

In light mode there is no separation between the text of the search result and the page behind which creates a messy result.

What Hugo Module versions does your site use?

module github.com/HugoBlox/theme-landing-page

go 1.19

require ( github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify v1.1.2-0.20231108143325-448ed0e3bd2b github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind v0.2.1-0.20240602133901-492e343c2a33 )

What operating system(s) are you seeing the problem on?

Windows, iOS

What browser(s) are you seeing the problem on?

Safari, Firefox

Which Hugo Blox template are you using?

Landing Page

What version of Hugo are you using?

0.126.3

[gcushen]

It may be a regression, as I recall this was not previously an issue. It appears the search results background shows correctly, but when scrolling the results, the background of the search results also scrolls up.

It appears that setting a background explicitly on the id=search element resolves the issue. If you want to help test that suggestion, you could try adding a background to that element via Custom CSS (see docs).

[CravateRouge]

It does solve the issue for the readability but you still have to scroll down the page behind to see the end of the search result because the scrolling is not focus on the search results but on the page content behind it.