Draw focus to search form during active search
What does this MR do and why?
- Interior pages: Draw more focus towards an active search by reducing the prominence of other elements on the page (recommended by UX in #1602 (closed))
- Skipping this treatment on the homepage for now. This would require a lot of separate code due to the different layout. It's also less impactful there since the result panel doesn't overlay as much text content.
- Homepage: Adds a border to the search results list (recommended by UX in #1604 (closed))
- Cleans up some spacing inconsistencies around result list items.
Screenshots, screen recordings, or links to review app
| Before | After |
|---|---|
 |
 |
 |
 |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md. -
Compile for Google search: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/search.md#local-build-with-google-programmable-search -
Try some searches from an interior page. Content behind the search form and navbar should appear with a darkened overlay above it.
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.
Edited by Sarah German