Improve display of tags

[sympmarc]

When displaying tags in the list or card view (at least), the display is rather ugly, and doesn't provide the functionality we had in older versions. This is the case even after adding Auto and enabling localization.

Here's a very simple example. In this result, the file has been tagged with two values for a Managed Metadata column: Finance and Risk. As you can see, the two values are squished together as well as being underlined, which suggests they are links.

I'd suggest two enhancements, the first being easier than the second:

1. Change the formatting for the tags to list them in a more legible way. At the very least, that would mean putting some white space between them. If we can't do No. 2, then we should also remove the underline.
2. Make the tags actual links, which filter the content for that Managed Metadata value.

I expect I could handle No. 1 -this has bugged me for a very long time, and I wish I'd already made the fix! It's probably just a CSS thing. The second is harder, and I'm not sure how to do it. (Maybe it should be a separate issue, but I wanted to capture these ideas together.)

[kasperbolarsen]

Something like this is easy enough ( GitHub Copilot did most of the work)

I would actually prefer that the name of the tag was shown as well as the value by it self sometime doesn't make sense

[FelloSimon]

What if you don't have access to the Copilot functions?

[kasperbolarsen]

Then you are in a world of pains. As I recall it a GitHub Copilot license is 10 USD/month and it is worth every cent!

[kasperbolarsen]

I got this far: The tags are rendered ok, and the links points to <a href="?q=Tags:'{{trim tag}}'" data-interception="off">{{tag}}</a>
Getting it formatted to use the "f" argument and encoding will require a lot more work, or someone smarter then me ;-)

[sympmarc]

I think it would be great to have a few options for tag display. The two approaches you've taken above both seem to address use cases.

[wobba]

Someone care to PR a change to the default templates for this?

[kasperbolarsen]

@sympmarc How about I make a PR for this

And add another sample to https://github.com/microsoft-search/pnp-modern-search-layouts for the more advanced version ?

[sympmarc]

That would be awesome. Just getting the tags to display more nicely, like in your first example, is a big step forward.

[kasperbolarsen]

tested in 4.13 :-) Works fine