Resolve "Frontend for clarifying the usefulness of the search bar"

What does this MR do?

Resting State

• Increase the width of the search box to 240px
• Remove the scope indicator (This group and This project).
• Rephrase the placeholder to: “Search or jump to…”

Active State

When the search bar becomes active:

• The width of the search box should increase to 320px for more comfortable typing.
• The width of the suggestions dropdown should be 320px
• The separator between the options for issues and MRs should be removed.
• The headers that indicate the scope should be as follows:
  • Project: Name of the project (no change)
  • Group: Name of the group (no change)
  • Global: All GitLab
• The style of these headers should match the 'Header title' style from the dropdown library spec previews.

Typing State

[Examples for all the possible row types can be found here]

• The max height of the suggestion dropdown should be 400px
• There should be a fade effect layer at the bottom to indicate the dropdown is scrollable.
• All substrings inside the dropdown which match the query should be bolded.
• The first row should be automatically highlighted, so the user can just press Enter to search.
• The first rows in the dropdown should allow the user to perform a search for the entered term:
  • Search rows for project scope:
  • Row 1: Magnifying glass + "KEYWORD" in this project
  • Row 2: Magnifying glass + "KEYWORD" in all GitLab
  • Search rows for group scope:
  • Row 1: Magnifying glass + "KEYWORD" in this group
  • Row 2: Magnifying glass + "KEYWORD" in all GitLab
  • Search row for global scope:
  • Row 1: Magnifying glass + "KEYWORD" in all GitLab

After that, navigation suggestions will be shown for projects, groups, pages inside the project/group, preferences pages and help pages that match the string entered.

• Project and group rows will show their avatar on the left side.
  • The size of the avatar will be 16px x 16px
  • The margin between the avatar and the name will be 4px
  • If the project or group doesn't have an avatar, the generic one with its initial should be used.
• The headers for each type of suggestion should also be updated to match the spec previews
• The header for pages in the project or group should be renamed to:
  • Project: In this project
  • Group: In this group

Are there points in the code the reviewer needs to double check?

• That I didn't terribly break something by changing the gitlab-theme mixin or the search template.
• I changed the dropdown global styles 😟

Why was this MR needed?

See #36409 (closed)

Screenshots (if relevant)

Resting State

Active State

Project	Group	Global

Typing State

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• API support added
• Tests added for this feature/bug
• Conform by the code review guidelines
  • Has been reviewed by a UX Designer
  • Has been reviewed by a Frontend maintainer
• Conform by the merge request performance guides
• Conform by the style guides
• Conform by the database guides
• If you have multiple commits, please combine them into a few logically organized commits by squashing them
• Internationalization required/considered
• End-to-end tests pass (package-and-qa manual pipeline job)

What are the relevant issue numbers?

Closes #36409 (closed)