UI: Multiple label=value pairs cannot be copied easily in webbrowser

What did you do?

Open active Alerts tab, or open a specific active Silence, with active Alerts.

If you select (using mouse) text of multiple Matchers in a silence, or select multiple label=value pairs in the affected alerts, and then copy it, and paste it into other place (i.e. form in a browser, text editor - tried Pluma, gedit, mcedit, vim, cat, Slack)

What did you expect to see?

After copying labels like location=abs hostname=foorbar (in HTML they are all inside a single div, with each label=value pair using a span:

<div>
<span class="btn btn-sm bg-faded btn-secondary mr-2 mb-2" style="user-select: text;">location=abc</span>
<span class="btn btn-sm bg-faded btn-secondary mr-2 mb-2" style="user-select: text;">hostname=foobar</span>
</div>

After selecting and copying (Either via implicit drag-copy behavior in Linux X11, or using Ctrl-C, or context menu) in Firefox or Chrome, then pasting it in other place you get:

location=abshostname=foorbar

What did you see instead? Under which circumstances?

After copy, pasing there is a space between each label=value pair:

location=abs hostname=foorbar

Environment

Firefox 95.0 on X11
Google Chrome 96.0.4664.110 on X11

• Alertmanager version: 0.23.0, amd64

Reproduce the issue from the active Alerts tab or a specific active Silence with active Alerts in Firefox or Chrome, selecting multiple label=value pairs and copying them. Inspect the rendered matcher and alert markup, then verify that pasted text preserves a separator between each pair in the affected views.