For multi word stream names, searching for particular phrases, like
the entirety of any word in it, caused no space to show before and/or
after that word. For example, searching for `core` resulted in
`**core**team` (the space between `core` and `team` missing).
The cause of this bug was that the immediate container was `div` with
`display: flex` and so spaces at the ends of its immediate child
elements: text nodes and `strong` elements - were not respected. This
is fixed now by wrapping all the `description_html` text in a `span`
element (while the optional user_pill_context stays in another `span`
as before).
Because the typeahead.js list items are currently just text, a user's
full name and avatar should be displayed in `input_pill`. To use
`input_pill`, a separate Handlebars partial view was created to
provide a mandatory container (`<div class="pill-container">`) for
`input_pill` and a flex container (`<div class="search_list_item">`)
for vertically aligning the text.
The description of each suggestion (i.e `description_html`) is
rendered as raw HTML, so every special character (e.g. whitespace)
should be HTML-escaped. This enables highlighting the substring in
each search suggestion that matches the query.
Fixes: #20267
N-Shar-ma
Oliver Pham